/* ShrinkWrap home screen, rebuilt in HTML from the app's Figma values (Tokens.kt / Type.kt).
   1 design unit = 1/440 of the screen width, so the phone scales to any size and stays sharp.
   Colours come from the page's tokens: --sw-ground, --sw-surface, --sw-ink, --sw-title, --sw-muted,
   --sw-meta, --sw-quiet, --sw-on-ink, --sw-ring, --sw-accent, --sw-divider (see shared/base.css).
   Put class "sw-dark" on .sw-phone to force the dark palette inside it whatever the page theme. */
.sw-phone{--bezel:#0d0d0e;position:relative;width:var(--sw-w,320px);aspect-ratio:440/956;border-radius:calc(var(--sw-w,320px)*.13);
  background:var(--bezel);padding:calc(var(--sw-w,320px)*.028);box-shadow:0 30px 60px -20px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06) inset;flex:none}
.sw-screen{container-type:inline-size;position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--sw-w,320px)*.105);
  background:var(--sw-ground);color:var(--sw-ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;
  --u:calc(100cqw/440);letter-spacing:-.0425em}
.sw-phone.sw-dark .sw-screen{--sw-ground:#0B0B0C;--sw-surface:#18191B;--sw-ink:#F2F2F0;--sw-title:#EDEDEB;--sw-muted:#9D9DA3;--sw-meta:#8F8F96;
  --sw-quiet:#26272A;--sw-on-ink:#0B0B0C;--sw-ring:#2F3034;--sw-accent:#F2F2F0;--sw-divider:rgba(255,255,255,.12)}
.sw-phone.sw-light .sw-screen{--sw-ground:#F3F3F2;--sw-surface:#FFFFFF;--sw-ink:#0A0A0A;--sw-title:#151515;--sw-muted:#6E6E73;--sw-meta:#7A7A80;
  --sw-quiet:#E9E9E8;--sw-on-ink:#FFFFFF;--sw-ring:#E2E2E2;--sw-accent:#0A0A0A;--sw-divider:rgba(10,10,10,.10)}
.sw-status{display:flex;justify-content:space-between;align-items:center;height:calc(48*var(--u));padding:0 calc(28*var(--u)) 0 calc(30*var(--u));
  font:500 calc(15*var(--u))/1 var(--font-sans);color:var(--sw-ink);letter-spacing:0}
.sw-status i{display:inline-flex;gap:calc(5*var(--u));align-items:center}
.sw-status i b{display:block;width:calc(14*var(--u));height:calc(14*var(--u));background:currentColor;border-radius:calc(2*var(--u))}
.sw-status i b:first-child{clip-path:polygon(50% 100%,0 25%,100% 25%);border-radius:0}
.sw-status i b:nth-child(2){clip-path:polygon(100% 0,100% 100%,0 100%)}
.sw-status i b:last-child{width:calc(8*var(--u))}
.sw-head{display:flex;align-items:center;justify-content:space-between;padding:calc(14*var(--u)) calc(30*var(--u)) calc(18*var(--u));
  border-bottom:1px solid var(--sw-divider);margin:0 calc(22*var(--u))}
.sw-head{padding-left:calc(8*var(--u));padding-right:calc(8*var(--u))}
.sw-brand{display:flex;align-items:center;gap:calc(10*var(--u));font:700 calc(21*var(--u))/1.2 var(--font-sans);letter-spacing:-.04em;color:var(--sw-title)}
.sw-brand svg{width:calc(38*var(--u));height:auto;display:block}
.sw-person{width:calc(24*var(--u));height:calc(24*var(--u));border:calc(1.8*var(--u)) solid var(--sw-muted);border-radius:50% 50% 30% 30%/40% 40% 60% 60%;opacity:.8}
.sw-free{padding:calc(26*var(--u)) calc(30*var(--u)) 0}
.sw-free p{margin:0;font:500 calc(17*var(--u))/1.42 var(--font-sans);color:var(--sw-muted)}
.sw-free strong{display:block;font:700 calc(47.5*var(--u))/1.15 var(--font-sans);letter-spacing:-.04em;color:var(--sw-ink);font-variant-numeric:tabular-nums}
.sw-story{display:flex;gap:calc(14*var(--u));padding:calc(16*var(--u)) calc(24*var(--u)) 0}
.sw-story figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:calc(6*var(--u));width:calc(80*var(--u))}
.sw-story img{width:calc(72*var(--u));height:calc(72*var(--u));border-radius:50%;object-fit:cover;box-shadow:0 0 0 calc(3*var(--u)) var(--sw-ground),0 0 0 calc(5.5*var(--u)) var(--sw-accent)}
.sw-story figcaption{font:500 calc(14*var(--u))/1.2 var(--font-sans);color:var(--sw-ink);white-space:nowrap}
.sw-tools{display:flex;justify-content:flex-end;gap:calc(30*var(--u));padding:calc(26*var(--u)) calc(32*var(--u)) calc(16*var(--u))}
.sw-tools span{width:calc(22*var(--u));height:calc(22*var(--u));display:block;color:var(--sw-ink)}
.sw-tools svg{width:100%;height:100%;display:block}
.sw-list{display:flex;flex-direction:column;gap:calc(12*var(--u));padding:0 calc(23*var(--u))}
.sw-card{display:flex;align-items:center;gap:calc(16*var(--u));background:var(--sw-surface);border-radius:calc(25*var(--u));padding:calc(14*var(--u)) calc(18*var(--u));
  box-shadow:0 calc(2*var(--u)) calc(4*var(--u)) rgba(0,0,0,.06)}
.sw-quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(3*var(--u));width:calc(66*var(--u));height:calc(66*var(--u));flex:none}
.sw-quad img{width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:cover;display:block}
.sw-quad img:nth-child(1){border-radius:calc(12*var(--u)) calc(3*var(--u)) calc(3*var(--u)) calc(3*var(--u))}
.sw-quad img:nth-child(2){border-radius:calc(3*var(--u)) calc(12*var(--u)) calc(3*var(--u)) calc(3*var(--u))}
.sw-quad img:nth-child(3){border-radius:calc(3*var(--u)) calc(3*var(--u)) calc(3*var(--u)) calc(12*var(--u))}
.sw-quad img:nth-child(4){border-radius:calc(3*var(--u)) calc(3*var(--u)) calc(12*var(--u)) calc(3*var(--u))}
.sw-card h4{margin:0;font:600 calc(18.5*var(--u))/1.3 var(--font-sans);letter-spacing:-.0425em;color:var(--sw-title)}
.sw-card p{margin:0;font:500 calc(15*var(--u))/1.35 var(--font-sans);color:var(--sw-meta);font-variant-numeric:tabular-nums}
.sw-card > div:not(.sw-ring):not(.sw-quad){min-width:0;flex:1}
.sw-ring{--p:39;position:relative;width:calc(60*var(--u));height:calc(60*var(--u));flex:none;border-radius:50%;
  background:conic-gradient(var(--sw-ink) calc(var(--p)*1%),var(--sw-ring) 0);display:grid;place-items:center}
.sw-ring::before{content:"";position:absolute;inset:calc(4.5*var(--u));border-radius:50%;background:var(--sw-surface)}
.sw-ring b{position:relative;font:600 calc(14*var(--u))/1 var(--font-sans);color:var(--sw-ink);letter-spacing:-.02em}
.sw-thumb{width:calc(52*var(--u));height:calc(52*var(--u));border-radius:calc(12*var(--u));object-fit:cover;flex:none}
.sw-tabs{position:absolute;left:50%;bottom:calc(30*var(--u));transform:translateX(-50%);display:flex;gap:calc(4*var(--u));padding:calc(5*var(--u));
  background:var(--sw-surface);border-radius:999px;box-shadow:0 calc(4*var(--u)) calc(18*var(--u)) rgba(0,0,0,.10)}
.sw-tabs span{font:500 calc(16*var(--u))/1 var(--font-sans);color:var(--sw-muted);padding:calc(14*var(--u)) calc(26*var(--u));border-radius:999px;letter-spacing:-.02em}
.sw-tabs span.on{background:var(--sw-ink);color:var(--sw-on-ink)}
.sw-home{position:absolute;left:50%;bottom:calc(10*var(--u));transform:translateX(-50%);width:calc(130*var(--u));height:calc(4.5*var(--u));border-radius:9px;background:var(--sw-ink);opacity:.75}
.sw-fade{position:absolute;inset:auto 0 0 0;height:calc(150*var(--u));background:linear-gradient(transparent,var(--sw-ground) 70%);pointer-events:none}