/* uPly landing — built on TK.Town Design System tokens (css/tokens/*). */
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--radius-pill)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.band :focus-visible,.footer :focus-visible{outline-color:var(--paper)}

/* header */
.header{position:sticky;top:0;z-index:40;background:var(--header-veil);backdrop-filter:blur(var(--blur-header));-webkit-backdrop-filter:blur(var(--blur-header));border-bottom:1px solid var(--line)}
.header .shell{display:flex;align-items:center;justify-content:space-between;height:var(--header-h-sm)}
.wordmark{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--text-h4);letter-spacing:var(--track-display);color:var(--ink)}
.wordmark i{font-style:normal;color:var(--accent)}
.wordmark:hover{color:var(--ink)}
.nav{display:flex;gap:var(--space-8);font-size:var(--text-sm);color:var(--text-secondary)}
.nav a:hover{color:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--control-h-2xl);padding:0 var(--space-8);border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--fw-bold);border:1px solid transparent;transition:var(--transition-color)}
.btn-accent{background:var(--accent);color:var(--text-on-accent)}
.btn-accent:hover{background:var(--ink);color:var(--paper)}
.btn-outline-dark{border-color:var(--onink-line-strong);color:var(--paper)}
.btn-outline-dark:hover{border-color:var(--paper);color:var(--paper)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:var(--surface);color:var(--accent)}

/* hero band */
.band{background:var(--ink);color:var(--paper)}
.hero{padding:var(--space-12) 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-11);align-items:end}
.hero .eyebrow{color:var(--onink-55)}
.hero h1{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:clamp(46px,7.4vw,var(--text-hero));line-height:var(--leading-hero);letter-spacing:var(--track-display-tight);margin:var(--space-6) 0 var(--space-7)}
.hero h1 i{font-style:normal;color:var(--accent)}
.hero .ko{font-size:clamp(22px,3vw,var(--text-h2));font-weight:var(--fw-bold);line-height:var(--leading-title);margin:0 0 var(--space-6)}
.hero .lead{font-size:var(--text-lg);line-height:var(--leading-body);color:var(--onink-80);max-width:560px;margin:0 0 var(--space-9)}
.cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.disclosure{margin-top:var(--space-5);font-size:var(--text-xs-2);color:var(--onink-55)}
.icon-tile{width:100%;max-width:340px;aspect-ratio:1;justify-self:end}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--space-12);border-top:1px solid var(--onink-line)}
.facts div{padding:var(--space-6) var(--space-6) 0 0}
.facts dt{font-family:var(--font-display);font-size:var(--text-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--track-eyebrow-wider);color:var(--onink-55);text-transform:uppercase}
.facts dd{margin:var(--space-2) 0 0;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-h5);letter-spacing:var(--track-title)}

/* player — real app UI rendered as SVG (assets/player-ui.svg) */
.player{margin:var(--space-11) 0 0;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--onink-line)}
.player img{display:block;width:100%;height:auto}

/* sections */
.section{padding-top:var(--section-gap)}
.section:last-of-type{padding-bottom:var(--section-gap)}
.sh{display:flex;align-items:baseline;gap:var(--space-5);flex-wrap:wrap;padding-bottom:var(--space-5);border-bottom:1px solid var(--line);margin-bottom:var(--space-8)}
.sh h2{margin:0;font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--text-h2);letter-spacing:var(--track-title);line-height:var(--leading-title)}
.sh p{margin:0;font-size:var(--text-base);color:var(--text-muted)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-2xl);padding:var(--space-8)}
.card .eyebrow{display:block;margin-bottom:var(--space-5)}
.card h3{margin:0 0 var(--space-2);font-family:var(--font-sans);font-size:var(--text-h6);font-weight:var(--fw-bold);letter-spacing:var(--track-title-soft)}
.card p{margin:0;font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-secondary)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-pill);font-family:var(--font-display);font-size:var(--text-3xs);font-weight:var(--fw-semibold);letter-spacing:var(--track-pill);color:var(--text-secondary)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-11)}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:44px 1fr;gap:var(--space-5);padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.rows .n{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:var(--text-h6);color:var(--ink-30)}
.rows b{display:block;font-size:var(--text-md);font-weight:var(--fw-bold)}
.rows span{display:block;margin-top:var(--space-1);font-size:var(--text-sm-2);color:var(--text-muted);line-height:var(--leading-body)}

.enc{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius-2xl);padding:var(--space-8)}
.enc .eyebrow{display:block;margin-bottom:var(--space-5)}
.enc ul{list-style:none;margin:0;padding:0}
.enc li{display:flex;justify-content:space-between;padding:var(--space-4) 0;border-bottom:1px solid var(--line-soft);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-base)}
.enc li span{font-family:var(--font-sans);font-weight:var(--fw-regular);color:var(--text-muted);font-size:var(--text-xs-2)}
.enc li.on{background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding-inline:var(--space-5);border-bottom-color:transparent}
.enc li.on span{color:var(--onink-65)}

table{width:100%;border-collapse:collapse}
th{font-family:var(--font-display);font-size:var(--text-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--track-eyebrow-wider);text-transform:uppercase;color:var(--text-eyebrow);text-align:left;padding:0 0 var(--space-4);border-bottom:1px solid var(--line-bold)}
td{padding:var(--space-6) 0;border-bottom:1px solid var(--line);font-size:var(--text-base)}
td:first-child{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-lg)}
td.muted{color:var(--text-faint)}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--text-xs)}

.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-5);padding:var(--space-7) 0;font-size:var(--text-lg);font-weight:var(--fw-bold);transition:var(--transition-color)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"→";color:var(--text-faint)}
.faq details[open] summary::after{content:"↓";color:var(--accent)}
.faq summary:hover{color:var(--accent)}
.faq p{margin:0 0 var(--space-7);max-width:760px;font-size:var(--text-base);line-height:var(--leading-body);color:var(--text-secondary)}

.closing{padding:var(--space-12) 0}
.closing .shell{display:flex;justify-content:space-between;align-items:end;gap:var(--space-9);flex-wrap:wrap}
.closing h2{margin:var(--space-5) 0 0;font-family:var(--font-display);font-weight:var(--fw-extrabold);font-size:clamp(38px,5vw,var(--text-hero-lg));line-height:var(--leading-display);letter-spacing:var(--track-display)}
.closing h2 i{font-style:normal;color:var(--accent)}
.closing .eyebrow{color:var(--onink-55)}
.closing p{margin:var(--space-5) 0 0;color:var(--onink-65);font-size:var(--text-base)}

.footer{background:var(--ink);color:var(--onink-65);border-top:1px solid var(--onink-line);font-size:var(--text-xs-2)}
.footer .shell{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;padding-block:var(--space-9)}
.footer .wordmark{color:var(--paper);font-size:var(--text-h6)}

@media (width < 64rem){
  .hero-grid{grid-template-columns:1fr}
  .icon-tile{display:none}
  .grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:var(--space-9)}
  .facts{grid-template-columns:1fr 1fr}
}
@media (width < 48rem){
  .nav{display:none}
  .grid{grid-template-columns:1fr}
  .section{padding-top:var(--section-gap-sm)}
  .section:last-of-type{padding-bottom:var(--section-gap-sm)}
  .hero{padding:var(--section-gap-sm) 0}
}