/* CloseEase phone: the mobile site. An original slim clamshell drawn in CSS, in the logo's navy, gold and white.
   phone.js sets the sizes (--pw phone width, --sw/--sh screen, --ta space above the screen, --lh lid height, --bh base height, --u = 1% of phone width). */
#phone{display:none}
html.m,html.m body{height:100%;overflow:hidden;overscroll-behavior:none;background:#010a24}
html.m body:not(.plain) #os,html.m body:not(.plain) #plain{display:none}
html.m body:not(.plain) #phone{display:block}
html.m body.plain{overflow:auto;height:auto}
html.m:has(body.plain){overflow:auto;height:auto}

#phone{--navy:#021E59;--deep:#010a24;--gold:#E2B740;--gold2:#f5d77a;--ink:#e8edfb;--mute:#c3cdec;--mint:#9be7dc;
  position:fixed;inset:0;overflow:hidden;font-family:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;
  background:radial-gradient(ellipse 120% 70% at 50% 42%,#0b3a9a 0,#021E59 48%,#010a24 100%);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased}
#phone *{box-sizing:border-box}
#phone button{-webkit-tap-highlight-color:transparent}
:where(#phone) button{font:inherit;color:inherit}
#phone :focus-visible{outline:3px solid var(--gold2);outline-offset:2px}

/* ---------- the first screen: headline, the folded phone, Message us ---------- */
.ph-intro{position:absolute;left:0;right:0;top:0;z-index:3;text-align:center;padding:max(26px,env(safe-area-inset-top)) 22px 0;
  transition:opacity .35s ease,transform .45s cubic-bezier(.3,.7,.2,1);animation:phRise .6s cubic-bezier(.2,.8,.2,1) backwards}
.ph-hl{margin:0 auto 10px;max-width:14.5em;font:700 clamp(25px,7.3vw,34px)/1.07 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.6px;color:#fff;text-wrap:balance}
.ph-hl em{font-style:normal;color:var(--gold2);text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.14em;text-decoration-color:rgba(245,215,122,.55)}
.ph-tap{position:absolute;left:0;width:100%;margin:0;text-align:center;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold2);
  pointer-events:none;transition:opacity .3s;animation:phPulse 2.4s ease-in-out infinite}
.ph-acts{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 22px max(8px,env(safe-area-inset-bottom));
  transition:opacity .3s ease,transform .45s cubic-bezier(.3,.7,.2,1);animation:phRise .6s .12s cubic-bezier(.2,.8,.2,1) backwards}
.ph-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:360px;min-height:54px;padding:0 20px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#f9df8c,#E2B740);color:var(--navy)!important;font:700 17px/1 "Geist",system-ui,sans-serif;letter-spacing:.1px;
  box-shadow:0 4px 0 #a8811c,0 12px 32px rgba(226,183,64,.28);transition:transform .08s,box-shadow .08s}
.ph-go svg{width:22px;height:22px}
.ph-go:active{transform:translateY(3px);box-shadow:0 1px 0 #a8811c,0 6px 18px rgba(226,183,64,.2)}
.ph-plain{min-height:44px;padding:8px 12px;border:0;background:none;color:#d3dbf3;font-size:13px!important;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#phone.away .ph-intro{opacity:0;transform:translateY(-28px);pointer-events:none}
#phone.away .ph-acts{opacity:0;transform:translateY(28px);pointer-events:none;visibility:hidden;transition:opacity .3s,transform .45s,visibility 0s .45s}
#phone.away .ph-tap{opacity:0;animation:none}
@keyframes phRise{from{opacity:0;transform:translateY(14px)}}
@keyframes phPulse{50%{opacity:.5}}
/* landscape phones: words on the left, the phone on the right */
#phone.land .ph-intro{right:50%;text-align:left;padding:max(18px,env(safe-area-inset-top)) 18px 0 max(22px,env(safe-area-inset-left))}
#phone.land .ph-hl{font-size:clamp(22px,6.2vh,30px);margin-left:0}
#phone.land .ph-acts{right:50%;align-items:flex-start;padding-left:max(22px,env(safe-area-inset-left))}

/* the rig holds the whole phone; phone.js moves and scales it between folded, open and zoomed */
.ph-rig{position:absolute;left:0;top:0;width:var(--pw);height:calc(var(--lh) + var(--bh));transform-origin:0 0;perspective:calc(var(--pw) * 4);
  transition:transform .82s cubic-bezier(.55,.05,.2,1)}
.ph-rig[role=button]{cursor:pointer}
#phone.instant .ph-rig,#phone.instant .ph-lid{transition:none!important}

/* brushed navy metal */
.ph-metal{background:
  linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.16) 46%,rgba(255,255,255,0) 60%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.04) 1px 3px),
  linear-gradient(180deg,#123b8f,#0a2a6e 40%,#06204f)}

/* ---------- lid ---------- */
.ph-lid{position:absolute;left:0;top:0;width:100%;height:var(--lh);transform-origin:50% 100%;transform-style:preserve-3d;
  transform:rotateX(180deg);transition:transform .7s cubic-bezier(.5,0,.2,1);z-index:2}
#phone.open .ph-lid{transform:rotateX(0deg)}
#phone.zoomed .ph-lid{transform:none;transform-style:flat}
.ph-face{position:absolute;inset:0;border-radius:calc(var(--u)*9) calc(var(--u)*9) calc(var(--u)*3) calc(var(--u)*3);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 0 calc(var(--u)*.6) rgba(255,255,255,.18),inset 0 calc(var(--u)*-1) calc(var(--u)*2) rgba(0,0,0,.35)}
#phone.zoomed .ph-outer{display:none}
.ph-outer{transform:rotateX(180deg);border-radius:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*9) calc(var(--u)*9);cursor:pointer;overflow:hidden;
  box-shadow:inset 0 0 0 calc(var(--u)*.6) rgba(255,255,255,.22),0 calc(var(--u)*6) calc(var(--u)*14) rgba(0,0,0,.55)}
/* a slow highlight that slides across the folded lid */
.ph-outer:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.16) 47%,rgba(255,255,255,.04) 52%,transparent 60%);
  background-size:260% 100%;background-repeat:no-repeat;animation:phShine 6s ease-in-out 1.2s infinite}
@keyframes phShine{0%,55%{background-position:130% 0}100%{background-position:-40% 0}}
.ph-earpiece{position:absolute;left:50%;top:calc(var(--u)*6);width:calc(var(--u)*22);height:calc(var(--u)*2.2);transform:translateX(-50%);border-radius:99px;
  background:repeating-linear-gradient(90deg,#020a1e 0 calc(var(--u)*1),#1a3c86 calc(var(--u)*1) calc(var(--u)*2));box-shadow:inset 0 1px 2px #000}
.ph-brand{position:absolute;left:0;right:0;top:calc(var(--u)*10.5);text-align:center;font:700 calc(var(--u)*3.6)/1 "Space Grotesk",system-ui,sans-serif;letter-spacing:calc(var(--u)*1.2);color:var(--gold)}
.ph-screenframe{position:absolute;left:calc((var(--pw) - var(--sw)) / 2 - var(--u)*2.4);top:calc(var(--ta) - var(--u)*2.4);width:calc(var(--sw) + var(--u)*4.8);height:calc(var(--sh) + var(--u)*4.8);
  border-radius:calc(var(--u)*3);background:#020814;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 calc(var(--u)*.5) rgba(0,0,0,.4)}

/* outer lid, after the Motorola RAZR: a camera tab on the top edge, a black glass panel holding the little display and the
   metal logo, spun-metal finish that fans out from the speaker slot, and the base's chin showing below */
.ph-outer.ph-metal{border-radius:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*2) calc(var(--u)*2);background:
  radial-gradient(ellipse 30% 12% at 50% 93%,rgba(255,255,255,.2),transparent 70%),
  repeating-conic-gradient(from 0deg at 50% 93%,rgba(255,255,255,.045) 0deg .4deg,rgba(0,0,0,.05) .4deg .9deg),
  conic-gradient(from -90deg at 50% 93%,#0a2768 0deg,#3866cc 26deg,#0a2463 50deg,#1d48a6 72deg,#2f5dc0 90deg,#1d48a6 108deg,#0a2463 130deg,#3866cc 154deg,#0a2768 180deg,#06204f 181deg 360deg)}
.ph-cam{position:absolute;left:50%;top:0;width:calc(var(--u)*24);height:calc(var(--u)*10);transform:translateX(-50%);border-radius:0 0 calc(var(--u)*3) calc(var(--u)*3);
  background:linear-gradient(180deg,#141a28,#03050b 70%);box-shadow:inset 0 0 0 calc(var(--u)*0.4) rgba(255,255,255,.1),0 calc(var(--u)*0.5) calc(var(--u)*1) rgba(0,0,0,.5)}
.ph-lens{position:absolute;left:50%;top:50%;width:calc(var(--u)*6);height:calc(var(--u)*6);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#7d9be0 0 8%,#14244d 30%,#000 70%);box-shadow:0 0 0 calc(var(--u)*0.7) #6f7fa4,0 0 0 calc(var(--u)*1.2) #050912}
.ph-glass{position:absolute;left:calc(var(--u)*12);right:calc(var(--u)*12);top:11%;height:52%;border-radius:calc(var(--u)*4);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9%;
  background:linear-gradient(180deg,#0c111d,#02040a 55%,#060a14);
  box-shadow:inset 0 0 0 calc(var(--u)*0.5) rgba(255,255,255,.13),0 0 0 calc(var(--u)*0.6) rgba(0,0,0,.55),0 calc(var(--u)*0.8) calc(var(--u)*1.6) rgba(0,0,0,.35)}
.ph-glass:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(150deg,rgba(255,255,255,.13) 0,rgba(255,255,255,.04) 30%,transparent 31%)}
.ph-ext{position:relative;height:54%;aspect-ratio:1.3;max-width:64%;border-radius:calc(var(--u)*1.6);
  background:radial-gradient(ellipse at 30% 20%,#1c2a4a,#020611 70%);box-shadow:inset 0 0 0 calc(var(--u)*0.5) #000,0 0 0 calc(var(--u)*0.4) rgba(255,255,255,.16);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.4);color:var(--gold2);font-family:"IBM Plex Mono",ui-monospace,monospace}
.ph-ext b{font-size:calc(var(--u)*6.4);font-weight:500;letter-spacing:calc(var(--u)*0.3);line-height:1;text-shadow:0 0 calc(var(--u)*2) rgba(245,215,122,.6)}
.ph-ext span{font-size:calc(var(--u)*2.6);letter-spacing:calc(var(--u)*0.5);line-height:1;color:#9fb3e6}
.ph-ext .ext-tap{margin-top:calc(var(--u)*0.8);padding:calc(var(--u)*0.8) calc(var(--u)*1.8);border-radius:99px;background:rgba(245,215,122,.16);color:var(--gold2);text-transform:uppercase;animation:phPulse 1.6s ease-in-out infinite}
.ph-ext i{position:absolute;right:calc(var(--u)*2.2);top:calc(var(--u)*2);width:calc(var(--u)*1.6);height:calc(var(--u)*1.6);border-radius:50%;background:var(--gold);box-shadow:0 0 calc(var(--u)*2) var(--gold);animation:phPulse 1.6s infinite}
.ph-crown svg{display:block;width:100%;height:100%}
/* the logo as a raised metal badge under the display: light catches the top edge, a soft shadow falls below */
.ph-crown{position:relative;height:24%;aspect-ratio:59/62;line-height:0;
  filter:drop-shadow(0 calc(var(--u)*-0.3) 0 rgba(255,255,255,.3)) drop-shadow(0 calc(var(--u)*0.4) 0 rgba(0,0,0,.7)) drop-shadow(0 calc(var(--u)*1) calc(var(--u)*1.4) rgba(0,0,0,.5))}
.ph-grille{position:absolute;left:50%;bottom:6%;width:calc(var(--u)*16);height:calc(var(--u)*1.8);transform:translateX(-50%);border-radius:99px;
  background:#020a1e;box-shadow:inset 0 1px 2px #000,0 calc(var(--u)*0.4) 0 rgba(255,255,255,.18)}
/* a hint that it opens: every few seconds the lid lifts a little, like someone thumbing it open */
#phone.ready:not(.open):not(.away) .ph-lid{animation:phPeek 5s ease-in-out 1.6s infinite}
@keyframes phPeek{0%,72%,100%{transform:rotateX(180deg)}80%{transform:rotateX(164deg)}86%{transform:rotateX(176deg)}}

/* ---------- base / keypad ---------- */
.ph-base{position:absolute;left:0;top:var(--lh);width:100%;height:var(--bh);border-radius:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*9) calc(var(--u)*9);
  box-shadow:inset 0 0 0 calc(var(--u)*.6) rgba(255,255,255,.18),0 calc(var(--u)*6) calc(var(--u)*14) rgba(0,0,0,.55)}
.ph-hinge{position:absolute;left:calc(var(--u)*12);right:calc(var(--u)*12);top:calc(var(--u)*-2.5);height:calc(var(--u)*7);border-radius:99px;
  background:linear-gradient(180deg,#4a6fc2,#0c2a6c 45%,#061a46 60%,#2c4f9e);box-shadow:0 2px 4px rgba(0,0,0,.6)}
.ph-hinge:after{content:"";position:absolute;inset:calc(var(--u)*2.4) calc(var(--u)*6);border-radius:99px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold2) 50%,var(--gold) 80%,transparent);opacity:.8}
.ph-keys{position:absolute;left:calc(var(--u)*7);right:calc(var(--u)*7);top:calc(var(--u)*9);bottom:calc(var(--u)*32);display:flex;flex-direction:column;gap:calc(var(--u)*3)}
.ph-nav{flex:none;display:grid;grid-template-columns:1fr calc(var(--u)*30) 1fr;grid-template-rows:1fr 1fr;gap:calc(var(--u)*2) calc(var(--u)*3);height:calc(var(--u)*30)}
.ph-k{border:0;cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border-radius:calc(var(--u)*2.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.25);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .08s;padding:0;touch-action:manipulation}
.ph-k:active,.ph-k.press{background:linear-gradient(180deg,rgba(245,215,122,.35),rgba(226,183,64,.15))}
.ph-k svg{width:34%;height:auto;max-height:60%}
.ph-soft i{display:block;width:40%;height:calc(var(--u)*1);border-radius:9px;background:var(--gold2);box-shadow:0 0 calc(var(--u)*2) rgba(245,215,122,.7)}
.ph-call svg{color:#7ff59a;filter:drop-shadow(0 0 calc(var(--u)*1.5) rgba(127,245,154,.6))}
.ph-end svg{color:#ff8a8a;filter:drop-shadow(0 0 calc(var(--u)*1.5) rgba(255,138,138,.6))}
.ph-dpad{grid-column:2;grid-row:1/3;position:relative;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#2a55b0,#0b2766 70%);box-shadow:inset 0 0 0 calc(var(--u)*.6) rgba(245,215,122,.75),inset 0 0 calc(var(--u)*3) rgba(0,0,0,.6),0 0 calc(var(--u)*3) rgba(226,183,64,.25)}
.ph-dpad button{position:absolute;border:0;background:transparent;cursor:pointer;color:var(--gold2);padding:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*3)}
.ph-dpad button:active,.ph-dpad button.press{color:#fff;text-shadow:0 0 8px var(--gold2)}
.ph-dpad .u{left:30%;right:30%;top:0;height:32%}.ph-dpad .d{left:30%;right:30%;bottom:0;height:32%}
.ph-dpad .l{top:30%;bottom:30%;left:0;width:32%}.ph-dpad .r{top:30%;bottom:30%;right:0;width:32%}
.ph-dpad .c{left:32%;top:32%;width:36%;height:36%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3c68c4,#0d2a6b);box-shadow:inset 0 0 0 calc(var(--u)*.5) rgba(255,255,255,.3);color:#fff;font-size:calc(var(--u)*2.6);letter-spacing:.5px}
.ph-pad{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;border-radius:calc(var(--u)*3);overflow:hidden;
  background:linear-gradient(180deg,#0e3a8f,#0a2b70);box-shadow:inset 0 0 0 calc(var(--u)*.5) rgba(255,255,255,.18),inset 0 calc(var(--u)*1) calc(var(--u)*3) rgba(0,0,0,.35)}
.ph-pad button{border:0;background:transparent;cursor:pointer;color:#fff;box-shadow:inset -1px -1px 0 rgba(0,0,0,.35),inset 1px 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0}
.ph-pad button b{font:500 calc(var(--u)*5.6)/1 "Space Grotesk",system-ui,sans-serif;text-shadow:0 0 calc(var(--u)*2) rgba(245,215,122,.75)}
.ph-pad button small{font:500 calc(var(--u)*2.3)/1 "IBM Plex Mono",monospace;letter-spacing:1px;color:var(--gold2)}
.ph-pad button:active,.ph-pad button.press{background:rgba(245,215,122,.2)}
.ph-mic{position:absolute;left:50%;bottom:calc(var(--u)*7);width:calc(var(--u)*14);height:calc(var(--u)*1.8);transform:translateX(-50%);border-radius:99px;background:#020a1e;box-shadow:inset 0 1px 2px #000}

/* ---------- the screen ---------- */
.ph-screen{position:absolute;left:calc((var(--pw) - var(--sw)) / 2);top:var(--ta);width:var(--sw);height:var(--sh);border-radius:calc(var(--u)*1.2);overflow:hidden;
  background:#000;color:#fff;font-size:var(--fs);line-height:1.45;display:flex;flex-direction:column}
.ph-screen.off>*{visibility:hidden}
.ph-screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.06),transparent 35%)}
.ph-screen.wake>.ph-view,.ph-screen.wake>.ph-status,.ph-screen.wake>.ph-soft-bar{animation:phWake .75s ease-out}
@keyframes phWake{0%{opacity:0;filter:brightness(2.4)}35%{opacity:1}}
.ph-status{flex:none;display:flex;align-items:center;gap:8px;padding:5px 10px;font:600 .74em/1 "IBM Plex Mono",ui-monospace,monospace;background:linear-gradient(180deg,#0b2a6d,#021E59);color:#dfe6fa;border-bottom:1px solid rgba(245,215,122,.35)}
.ph-status .car{flex:1;text-align:center;color:var(--gold2);letter-spacing:1px}
.ph-sig{display:flex;align-items:flex-end;gap:2px;height:12px}.ph-sig i{width:3px;background:#dfe6fa;border-radius:1px}
.ph-bat{width:22px;height:11px;border:1.5px solid #dfe6fa;border-radius:2px;position:relative;padding:1px}.ph-bat:after{content:"";position:absolute;right:-4px;top:2.5px;width:2px;height:4px;background:#dfe6fa}
.ph-bat i{display:block;height:100%;width:80%;background:var(--gold2)}
.ph-view{flex:1;min-height:0;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 0,#0c3486 0,#021E59 55%,#010a24 100%)}
.ph-page{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;-webkit-user-select:text;scrollbar-width:thin;scrollbar-color:rgba(245,215,122,.4) transparent}
.ph-page.fwd{animation:phIn .26s cubic-bezier(.2,.8,.2,1)}
.ph-page.bk{animation:phBk .26s cubic-bezier(.2,.8,.2,1)}
@keyframes phIn{from{opacity:0;transform:translateX(9%)}}
@keyframes phBk{from{opacity:0;transform:translateX(-9%)}}
.ph-soft-bar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:4px 6px;background:linear-gradient(0deg,#0b2a6d,#021E59);border-top:1px solid rgba(245,215,122,.35);font:600 .86em/1 "Geist",system-ui,sans-serif}
.ph-soft-bar button{background:none;border:0;padding:0 8px;cursor:pointer;color:#fff;text-align:left;min-height:42px;border-radius:99px;justify-self:start;white-space:nowrap}
.ph-soft-bar button:last-child{text-align:right;justify-self:end}
.ph-soft-bar button.pri{padding:0 14px;background:linear-gradient(180deg,#f9df8c,#E2B740);color:var(--navy);font-weight:700;box-shadow:0 2px 0 #a8811c}
.ph-soft-bar button.pri:active{transform:translateY(1px);box-shadow:0 1px 0 #a8811c}
.ph-soft-bar .mid{color:var(--gold2);font-size:.78em;letter-spacing:1.2px;text-transform:uppercase;text-align:center;white-space:nowrap}

/* home menu: nine apps, classic 3x3 grid */
.ph-home{display:flex;flex-direction:column;padding:8px 10px 10px;overflow:hidden}
.ph-sel-title{text-align:center;font:700 1.12em/1.2 "Space Grotesk",system-ui,sans-serif;color:#fff;margin:2px 0 2px}
.ph-sel-sub{text-align:center;font-size:.78em;line-height:1.35;color:var(--mute);margin:0 auto 6px;min-height:2.7em;max-width:24em}
.ph-grid{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4px 6px;min-height:0}
.ph-app{border:0;border-radius:14px;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:4px 2px;color:#fff;min-height:0;transition:background .15s}
.ph-app .ic{width:min(62%,64px);max-height:72%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:24%;flex:none;
  background:linear-gradient(160deg,#2156c2,#0a2a6e);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.4);color:#fff;transition:transform .15s,box-shadow .15s}
.ph-app .ic svg{width:56%;height:56%}
.ph-app .lb{font-size:.8em;font-weight:600;line-height:1.15;text-align:center}
.ph-app.pri .ic{background:linear-gradient(160deg,#f9df8c,#E2B740);color:var(--navy);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.12),0 0 18px rgba(245,215,122,.45)}
.ph-app.pri .lb{color:var(--gold2)}
.ph-app.sel{background:rgba(226,183,64,.13);box-shadow:inset 0 0 0 2px var(--gold)}
.ph-app.sel .ic{transform:translateY(-2px) scale(1.05);box-shadow:inset 0 0 0 2px var(--gold2),0 6px 16px rgba(0,0,0,.45),0 0 16px rgba(245,215,122,.35)}
.ph-app:active .ic{transform:scale(.93)}
.ph-home.intro .ph-app{animation:phPop .46s cubic-bezier(.2,.9,.3,1.25) backwards;animation-delay:calc(var(--d) + 420ms)}
@keyframes phPop{from{opacity:0;transform:translateY(10px) scale(.8)}}

/* app pages */
.ph-h{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;font:700 1.06em/1.2 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.1px;
  background:#04215e;border-bottom:2px solid var(--gold);outline:none;box-shadow:0 6px 12px -8px rgba(0,0,0,.6)}
.ph-h svg{width:1.2em;height:1.2em;color:var(--gold2);flex:none}
.ph-body{padding:12px 14px 18px}
.ph-body h1,.ph-body h2,.ph-body h3{font:700 1.08em/1.22 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.2px;color:var(--gold2);margin:18px 0 6px;text-wrap:balance}
.ph-body h1{font-size:1.28em;color:#fff}
.ph-body>:first-child{margin-top:2px}
.ph-body p,.ph-body li,.ph-body dd{font-size:.95em;margin:0 0 10px;color:var(--ink);text-wrap:pretty}
.ph-body ul,.ph-body ol{padding-left:1.15em;margin:0 0 12px}
.ph-body li{margin-bottom:6px}
.ph-body a{color:var(--gold2);text-underline-offset:2px}
.ph-body b,.ph-body strong{color:#fff}
.ph-body dl{margin:0;display:block}
.ph-body dt{font:700 1em/1.3 "Space Grotesk",system-ui,sans-serif;margin:16px 0 4px;color:#fff}
.ph-body dd{margin-left:0;color:#dfe5f7}
.ph-body .meta,.ph-body .p-get,.ph-body .p-eyebrow{font:500 .78em/1.45 "IBM Plex Mono",monospace;color:var(--mute)}
.ph-body .lead,.ph-body .p-lead{font-size:1em;color:#fff}
.ph-body .p-sub{color:#d3dbf3}
.ph-body .p-tag{display:inline-block;margin:0 0 4px;background:var(--gold);color:var(--navy);padding:3px 7px;border:0;border-radius:5px;font:600 .7em/1.4 "IBM Plex Mono",monospace;letter-spacing:.8px}
.ph-body .p-tag+h2{margin-top:6px;color:#fff;font-size:1.2em}
.ph-body .p-process{list-style:none;padding:0;display:grid;gap:8px;counter-reset:s}
.ph-body .p-process li{background:rgba(255,255,255,.06);border:0;border-left:4px solid var(--gold);border-radius:10px;padding:10px 12px;counter-increment:s}
.ph-body .p-process li:before,.ph-body .p-problems li:before{display:none}
.ph-body .p-process h3{margin:0 0 4px}.ph-body .p-process h3:before{content:counter(s) ". "}
.ph-body .p-problems{list-style:none;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.ph-body .p-problems li{background:rgba(255,255,255,.06);border:0;border-radius:10px;padding:10px 12px}
.ph-body .p-problems li b{display:block;color:var(--gold2)}
.ph-body .p-list li::marker{color:var(--gold2)}
.ph-lead{padding-bottom:4px}
.ph-lead p{font-size:.92em}
.ph-cta{display:block;width:100%;margin:16px 0 4px;padding:13px 14px;min-height:48px;border:0;border-radius:12px;background:linear-gradient(180deg,#f9df8c,#E2B740);color:var(--navy)!important;
  font:700 1em/1.2 "Geist",system-ui,sans-serif;text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 #a8811c;transition:transform .08s,box-shadow .08s}
.ph-cta svg{width:1.15em;height:1.15em;vertical-align:-.22em;margin-right:7px}
.ph-cta:active{transform:translateY(2px);box-shadow:0 1px 0 #a8811c}
.ph-cta.ghost{background:transparent;color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);margin-top:8px}
.ph-list{list-style:none;margin:0;padding:0}
.ph-list button{display:flex;width:100%;min-height:52px;align-items:center;gap:12px;text-align:left;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.09);padding:11px 14px;cursor:pointer;color:#fff;transition:background .12s}
.ph-list button:active{background:rgba(255,255,255,.06)}
.ph-list button.sel{background:rgba(226,183,64,.18);box-shadow:inset 3px 0 0 var(--gold)}
.ph-list .n{flex:none;width:1.7em;height:1.7em;border-radius:7px;background:rgba(245,215,122,.15);color:var(--gold2);font:600 .82em/1.7em "IBM Plex Mono",monospace;text-align:center}
.ph-list .t{flex:1;min-width:0}.ph-list .t b{display:block;font-weight:600;line-height:1.3}.ph-list .t small{display:block;color:var(--mute);font-size:.8em;margin-top:2px;line-height:1.35}
.ph-list .v{flex:none;color:var(--gold2);font:600 .8em "IBM Plex Mono",monospace}
.ph-list .v.ext svg{width:1.1em;height:1.1em;display:block}
.ph-more{margin:12px 0 0!important}
.ph-out{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff!important;text-decoration:none;font-weight:600;font-size:.95em}
.ph-out svg{flex:none;width:1.05em;height:1.05em;color:var(--gold2)}
.ph-out b{color:var(--gold2)!important;font-size:1.4em;line-height:1}
.ph-out:active{background:rgba(255,255,255,.1)}
.ph-in{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;text-decoration:none}
.ph-ask{margin-top:18px!important}

/* projects: a feed of cards with real screenshots */
.ph-pj .ph-body{padding:12px 12px 20px}
.ph-pj .ph-body>p:first-child{color:#d3dbf3;font-size:.9em}
.ph-grp{margin:18px 2px 4px!important;font:600 .74em/1.2 "IBM Plex Mono",monospace!important;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold2)!important}
.ph-grp-sub{margin:0 2px 10px!important;font-size:.8em!important;line-height:1.4;color:var(--mute)!important}
.ph-cards{list-style:none;margin:0!important;padding:0!important;display:grid;gap:14px}
.ph-cards li{margin:0}
.ph-card{display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;text-align:left;cursor:pointer;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.35);transition:transform .12s,box-shadow .12s}
.ph-card:active{transform:scale(.985)}
.ph-card.sel{box-shadow:inset 0 0 0 2px var(--gold),0 8px 22px rgba(0,0,0,.35)}
.ph-card .sh{position:relative;display:block;aspect-ratio:16/10;background:#0a1f52;overflow:hidden}
.ph-card .sh img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ph-card .sh:after{content:"";position:absolute;inset:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.1);pointer-events:none}
.ph-card .soon,.ph-car .soon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:500 .78em "IBM Plex Mono",monospace;color:var(--mute);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 10px,transparent 10px 20px)}
.ph-badge{position:absolute;left:8px;top:8px;padding:4px 7px;border-radius:6px;background:#fff;color:var(--navy)!important;font:600 .64em/1.2 "IBM Plex Mono",monospace;letter-spacing:.6px;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.ph-badge.client{background:var(--gold2)}
.ph-badge.crm{background:var(--mint)}
.ph-card .cnt{position:absolute;right:8px;bottom:8px;padding:4px 8px;border-radius:99px;background:rgba(1,10,36,.82);color:#fff;font:500 .64em/1.2 "IBM Plex Mono",monospace}
.ph-card .tx{display:block;padding:10px 12px 13px}
.ph-card .tx b{display:block;font:700 1.04em/1.2 "Space Grotesk",system-ui,sans-serif;color:#fff}
.ph-card .tx small{display:block;margin-top:4px;font-size:.82em;line-height:1.4;color:#d3dbf3}
/* one project */
.ph-car{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;background:#020a1e;outline:none}
.ph-car::-webkit-scrollbar{display:none}
.ph-car .sl{position:relative;flex:0 0 100%;display:block;aspect-ratio:16/10;margin:0;padding:0;border:0;background:#020a1e;scroll-snap-align:center;scroll-snap-stop:always;cursor:zoom-in;overflow:hidden}
.ph-car .sl img,.ph-car video{display:block;width:100%;height:100%;object-fit:contain}
.ph-car .clip{cursor:default}
.ph-car .clip img{filter:brightness(.55) saturate(.8)}
.ph-car .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:10px 18px 10px 12px;min-height:46px;border:0;border-radius:99px;cursor:pointer;
  background:linear-gradient(180deg,#f9df8c,#E2B740);color:var(--navy);font:700 .92em/1 "Geist",system-ui,sans-serif;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.55)}
.ph-car .play svg{width:1.4em;height:1.4em}
.ph-car .play:active{transform:translate(-50%,-48%)}
.ph-car-foot{display:flex;align-items:flex-start;gap:10px;padding:8px 14px 0}
.ph-car-foot .cap{flex:1;margin:0;min-height:2.8em;font-size:.8em;line-height:1.4;color:#d3dbf3}
.ph-car-foot .dots{display:flex;gap:5px;padding-top:.5em}
.ph-car-foot .dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.32);transition:width .2s,background .2s}
.ph-car-foot .dots i.on{width:16px;background:var(--gold2)}
.ph-pjd .ph-body{padding-top:6px}
.ph-body>.ph-badge{position:static;display:inline-block;box-shadow:none}
.ph-body .ph-pt{margin:8px 0 6px;font-size:1.32em;color:#fff;letter-spacing:-.4px}
.ph-body h4{margin:16px 0 6px;font:600 .74em/1.2 "IBM Plex Mono",monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold2)}
.ph-does{list-style:none;padding:0!important}
.ph-does li{position:relative;padding-left:1.25em}
.ph-does li:before{content:"";position:absolute;left:.15em;top:.55em;width:.45em;height:.45em;border-radius:2px;background:var(--gold2);transform:rotate(45deg)}
.ph-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 10px!important}
.ph-tags span{padding:3px 9px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(245,215,122,.45);color:var(--gold2);font:500 .74em/1.5 "IBM Plex Mono",monospace}
.ph-note{font-size:.8em!important;font-style:italic;color:var(--mute)!important}
.ph-next{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;width:100%;margin:14px 0 0;padding:12px 14px;border:0;border-radius:12px;cursor:pointer;text-align:left;color:#fff;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ph-next small{grid-column:1;font:500 .7em/1.3 "IBM Plex Mono",monospace;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.ph-next b{grid-column:1;font:700 1em/1.25 "Space Grotesk",system-ui,sans-serif}
.ph-next span{grid-column:2;grid-row:1/3;font-size:1.6em;line-height:1;color:var(--gold2)}
/* full-screen photo viewer */
.ph-gal{display:flex;flex-direction:column;overflow:hidden;background:#000}
.gal-t{flex:none;margin:0;padding:8px 44px;font:600 .76em/1.3 "IBM Plex Mono",monospace;letter-spacing:.5px;color:#d3dbf3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-track{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.gal-track::-webkit-scrollbar{display:none}
.gal-track.zoomed{overflow:hidden}
.gs{flex:0 0 100%;display:flex;align-items:center;justify-content:center;overflow:hidden;scroll-snap-align:center;scroll-snap-stop:always;cursor:zoom-in}
.gs img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain}
.gs.z{display:block;overflow:auto;cursor:zoom-out;overscroll-behavior:contain;scrollbar-width:none}
.gs.z img{width:270%;max-width:none;max-height:none}
.gal-cap{flex:none;margin:0;padding:8px 14px 2px;min-height:3.3em;font-size:.82em;line-height:1.4;color:var(--ink);text-align:center}
.gal-tip{flex:none;margin:0 0 6px;font:500 .66em/1.3 "IBM Plex Mono",monospace;letter-spacing:.6px;color:#a9b8e2;text-align:center}
.gal-nav{position:absolute;top:calc(50% - 30px);width:40px;height:56px;border:0;border-radius:10px;cursor:pointer;background:rgba(1,10,36,.72);color:#fff;font-size:1.9em;line-height:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.gal-nav.prev{left:6px}.gal-nav.next{right:6px}
.gal-nav[hidden],.gal-track.zoomed~.gal-nav{display:none}
/* the CRM page */
.ph-parts{margin:18px 0 6px}
.ph-parts h3{margin:0 0 8px!important}
.ph-part{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;width:100%;margin:0 0 8px;padding:8px;border:0;border-radius:12px;cursor:pointer;text-align:left;color:#fff;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ph-part img{display:block;width:96px;height:60px;object-fit:cover;object-position:top;border-radius:7px}
.ph-part b{display:block;font:700 .95em/1.2 "Space Grotesk",system-ui,sans-serif}
.ph-part small{display:block;margin-top:3px;font-size:.78em;line-height:1.35;color:#d3dbf3}
.ph-part:active{background:rgba(255,255,255,.1)}
.ph-body .p-acts{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:10px 0 0}
.ph-body .p-acts .ph-cta{margin:6px 0 0}
.ph-body .p-login{display:flex;align-items:center;justify-content:center;min-height:46px;font-weight:600;color:var(--gold2)}
/* About: the contact card and more pages */
.ph-vcard{display:flex;gap:12px;align-items:center;margin:16px 0 4px;padding:12px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(245,215,122,.35)}
.ph-vcard .mk{flex:none;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:13px;background:var(--navy);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.ph-vcard .mk svg{width:34px;height:auto}
.ph-vcard p{margin:0!important;font-size:.88em!important;line-height:1.4}
.ph-vcard .nm{font:700 1.05em/1.2 "Space Grotesk",system-ui,sans-serif!important;color:#fff!important}
.ph-links{list-style:none;padding:0!important;display:grid;gap:6px}
.ph-links{gap:0!important;border-top:1px solid rgba(255,255,255,.1)}
.ph-links li{margin:0}
.ph-links .ph-out{min-height:46px;padding:10px 4px;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.1);font-weight:500}

/* message app */
.ph-msg{display:flex;flex-direction:column;gap:8px;padding:12px 14px 18px}
.ph-msg .to{font-size:.85em;color:var(--mute);margin:0 0 2px}.ph-msg .to b{color:#fff}
.ph-msg label{font-size:.82em;font-weight:500;color:#d3dbf3;margin-bottom:-4px}
.ph-msg label .opt{font-weight:400;color:var(--mute)}
#phone .ph-msg input,#phone .ph-msg textarea{width:100%;min-height:46px;font:16px/1.4 "Geist",system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.35);border:1.5px solid rgba(245,215,122,.45);border-radius:10px;padding:10px 11px;outline:none;user-select:text;-webkit-user-select:text;transition:border-color .15s,box-shadow .15s}
#phone .ph-msg input:focus,#phone .ph-msg textarea:focus{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(245,215,122,.22)}
#phone .ph-msg [aria-invalid=true]{border-color:#ff9a8c}
.ph-msg textarea{min-height:5.6em;resize:none}
.ph-msg textarea::placeholder{color:#9fb0dc}
.ph-msg .cnt{align-self:flex-end;font:500 .74em "IBM Plex Mono",monospace;color:var(--mute);margin-top:-4px}
.ph-msg .ph-cta{margin-top:6px}
.ph-msg.busy .ph-cta{opacity:.7;pointer-events:none}
.ph-msg .st{font-size:.85em;color:var(--gold2);margin:0}
.ph-msg .st:empty{display:none}
.ph-msg .st.err{color:#ffb8ad}
.ph-msg .st a{color:#fff}
.ph-msg .note,.ph-msg .alt{margin:0;font-size:.8em;line-height:1.45;color:var(--mute)}
.ph-msg .note a,.ph-msg .alt a{color:var(--gold2)}
.ph-msg .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ph-sent{text-align:center;padding:22px 16px 20px}
.ph-sent .big{width:64px;height:64px;margin:0 auto 10px;color:var(--gold2)}
.ph-sent .big svg{width:100%;height:100%}
.ph-sent .big circle{stroke-dasharray:150;stroke-dashoffset:150;animation:phDraw .6s ease-out forwards}
.ph-sent .big path{stroke-dasharray:40;stroke-dashoffset:40;animation:phDraw .35s .45s ease-out forwards}
@keyframes phDraw{to{stroke-dashoffset:0}}
.ph-sent p{margin:0 0 8px;color:var(--ink)}
.ph-sent .ok{font-size:1.1em}.ph-sent .ok b{color:#fff}
.ph-sent .nx{margin:18px 0 8px;font:600 .74em/1.2 "IBM Plex Mono",monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold2)}
.ph-steps{list-style:none;margin:0 auto 4px;padding:0;max-width:21em;display:grid;gap:6px;counter-reset:s;text-align:left}
.ph-steps li{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.06);counter-increment:s;font-size:.9em;color:var(--ink)}
.ph-steps li:before{content:counter(s);flex:none;width:1.7em;height:1.7em;border-radius:50%;background:var(--gold2);color:var(--navy);font:700 .8em/1.7em "IBM Plex Mono",monospace;text-align:center}

/* settings toggles */
.ph-tog{width:2.6em;height:1.45em;border-radius:99px;background:#46507a;position:relative;flex:none;transition:background .15s}
.ph-tog:after{content:"";position:absolute;top:.15em;left:.15em;width:1.15em;height:1.15em;border-radius:50%;background:#fff;transition:transform .15s}
.ph-tog.on{background:var(--gold)}.ph-tog.on:after{transform:translateX(1.15em)}

/* games */
.ph-game{position:absolute;inset:0;display:flex;flex-direction:column;background:#010a24}
.ph-game .ph-gh{flex:none;display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font:600 .8em "IBM Plex Mono",monospace;color:var(--gold2);background:#021E59;border-bottom:1px solid rgba(245,215,122,.35)}
.ph-game .ph-gh button{background:rgba(245,215,122,.15);border:1px solid rgba(245,215,122,.5);border-radius:6px;color:var(--gold2);padding:6px 10px;font:600 1em "IBM Plex Mono",monospace;cursor:pointer}
.ph-game .ph-gb{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;touch-action:none}
.ph-game canvas{display:block;touch-action:none}
.ph-game .ph-gtip{flex:none;text-align:center;font-size:.75em;color:var(--mute);padding:5px 8px}
.ph-mines{display:grid;gap:2px;touch-action:manipulation}
.ph-mines button{border:0;padding:0;border-radius:4px;background:linear-gradient(160deg,#2a5cc4,#0f357f);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);color:#fff;font:700 1em/1 "Space Grotesk",system-ui,sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none}
.ph-mines button.o{background:#06143a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ph-mines button.boom{background:#b3261e}
.ph-mines button.cur{box-shadow:inset 0 0 0 2px var(--gold2)}
.ph-mines .n1{color:#7fb0ff}.ph-mines .n2{color:#7ff59a}.ph-mines .n3{color:#ff8a8a}.ph-mines .n4{color:#d3a6ff}.ph-mines .n5{color:#ffb36b}.ph-mines .n6{color:#6be4e0}.ph-mines .n7,.ph-mines .n8{color:#fff}
.ph-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(1,10,36,.88);text-align:center;padding:16px}
.ph-over[hidden]{display:none}
.ph-over b{font:700 1.4em "Space Grotesk",system-ui,sans-serif;color:var(--gold2)}
.ph-over p{margin:0;color:var(--ink);font-size:.9em}
.ph-over .ph-cta{width:auto;padding:10px 18px;margin:4px 0 0}

@media (prefers-reduced-motion:reduce){
  .ph-rig,.ph-lid,.ph-page,.ph-intro,.ph-acts,.ph-app,.ph-app .ic,.ph-screen>*{transition:none!important;animation:none!important}
  .ph-tap,.ph-outer:after,.ph-ext i,.ph-ext .ext-tap,.ph-lid{animation:none!important}
  .ph-sent .big circle,.ph-sent .big path{animation:none;stroke-dashoffset:0}}

/* landscape phones: two short rows of apps, no subtitle */
#phone.wide .ph-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
#phone.wide .ph-sel-sub{display:none}
#phone.wide .ph-app{padding:4px 2px}
#phone.wide .ph-app .ic{width:min(60%,52px)}
#phone.wide .ph-app .lb{font-size:.72em}
.ph-body figcaption{font-size:.8em;color:var(--mute);margin-top:4px}
/* bits of the standard website that the phone pages don't need (they're cloned from #plain) */
.ph-body .p-problems-cta{display:none}
.ph-body .p-founder{display:block;width:62%;margin:2px auto 12px;text-align:center}
.ph-body .p-founder img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.18)}
.ph-body .p-founder figcaption span::before{content:" · "}
.ph-body em.p-hl{font-style:normal;color:var(--gold2)}
.ph-body .p-intro{color:#d3dbf3}
.ph-body .p-problems li b{font:700 1em/1.3 "Space Grotesk",system-ui,sans-serif;margin-bottom:2px}
.ph-body .p-price{font-weight:700;color:var(--gold2)}
.ph-body .p-price-more{display:block;margin-top:2px;font-weight:400;font-size:.88em;color:#d3dbf3}

/* "How a project starts": the line under each step that says what the reader gets from it */
#phone .p-why{display:block;margin-top:4px;font-size:.92em;color:var(--mute)}