/* GMEREK IT — klasy bloków z archetypów Product Page i Legal Page.
   Archetypy w Claude Design trzymają te same wartości w stylach inline;
   tu są przeniesione do klas, żeby strona statyczna działała bez support.js
   i miała jeden punkt przełamania dla telefonu.
   Wszystkie wartości z tokens.css. Każdy podział nazwany.
   Kandydat do systemu: po akceptacji wchodzi do assets/css/ dla całej rodziny. */

.wrap{max-width:var(--maxw);margin:0 auto}
.pad{padding-left:var(--s5);padding-right:var(--s5)}

/* ---------- pasek materiałowy ---------- */
.bar{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line)}
.bar .wrap{height:var(--nav-h);display:flex;align-items:center;gap:var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s3);color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand img{width:24px;height:auto}
.brand span{font-family:var(--font-display);font-weight:700;font-size:var(--t-1);letter-spacing:-.01em}
.bar .inline{font-weight:600;font-size:var(--t-1);color:var(--ink);white-space:nowrap}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:var(--s4)}
.bar nav a{color:var(--gray);font-size:var(--t-1);font-weight:500}
.bar nav a:hover{color:var(--ink);text-decoration:none}

/* ---------- przełącznik języka ---------- */
.m-lang{display:flex;padding:2px;gap:2px;background:var(--cream-2);border-radius:var(--r-m)}
.m-lang button{font-family:var(--font-mono);font-size:var(--t-2);font-weight:500;letter-spacing:.06em;padding:var(--s1) var(--s2);border:0;border-radius:var(--r-s);background:transparent;color:var(--gray);cursor:pointer}
.m-lang button:hover{color:var(--ink)}
.m-lang button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:var(--e1)}

/* ---------- typografia bloków ---------- */
.eyebrow{font-family:var(--font-mono);font-size:var(--t-2);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mark-text)}
.label{font-family:var(--font-mono);font-size:var(--t-2);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.h1{font-family:var(--font-display);font-weight:700;font-size:var(--t5);line-height:var(--lh-display);letter-spacing:-.02em;color:var(--navy-900)}
.h2{font-family:var(--font-display);font-weight:700;font-size:var(--t4);line-height:var(--lh-display);letter-spacing:-.02em;color:var(--navy-900)}
.h3{font-family:var(--font-display);font-weight:700;font-size:var(--t2);line-height:var(--lh-display);letter-spacing:-.02em;color:var(--navy-900)}
.lead{font-size:var(--t1);color:var(--gray);max-width:var(--measure)}
.body{color:var(--gray);max-width:var(--measure)}
.prose{color:var(--ink);max-width:var(--measure);text-wrap:pretty}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- przyciski ---------- */
.btn{display:inline-block;font-family:var(--font-text);font-size:var(--t-1);font-weight:600;padding:var(--s3) var(--s4);border:0;border-radius:var(--r-l);background:var(--accent);color:var(--accent-on);cursor:pointer;transition:background 200ms var(--m-ease)}
.btn:hover{background:var(--accent-hover);color:var(--accent-on);text-decoration:none}
.btn-ghost{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--cream);color:var(--ink)}

/* ---------- podziały phi ---------- */
.phi{display:grid;grid-template-columns:61.8fr 38.2fr;gap:var(--s6)}   /* 61,8 / 38,2 */
.phi-r{display:grid;grid-template-columns:38.2fr 61.8fr;gap:var(--s6)} /* 38,2 / 61,8 */
.phi > *,.phi-r > *,.spec > *{min-width:0}
.table td{overflow-wrap:anywhere}

/* ---------- hero: urządzenie na bieli, pasmo granatowe od 38,2% wysokości ---------- */
.hero{position:relative;overflow:hidden;background:var(--white);padding:var(--s7) var(--s5) 0}
.hero > i{position:absolute;left:0;right:0;bottom:0;height:var(--s7);background:var(--navy-900)} /* pasmo za urządzeniem = dolny margines kolumny tekstu, tekst zostaje na bieli */
.hero .phi{position:relative;align-items:end;transform-origin:50% 38.2%}
.hero .copy{padding-bottom:var(--s8)}
.badge{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.badge i{display:block;width:34px;height:2px;background:var(--mark)}
.hero .h1{max-width:18ch}
.hero .lead{margin-top:var(--s4)}
.hero .lead.on-dark{color:rgba(255,255,255,.72)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.device{border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--cream-2);position:relative;min-height:377px;box-shadow:var(--e3)}
.device > i{position:absolute;left:0;top:0;width:61.8%;height:3px;background:var(--accent)}
.shot{position:absolute;left:var(--s4);bottom:var(--s4);right:var(--s4);font-family:var(--font-mono);font-size:var(--t-2);letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}

/* ---------- sekcje ---------- */
.section{background:var(--white);padding:var(--s7) var(--s5)}
.section.cream{background:var(--cream);border-top:1px solid var(--line)}
.rows{display:grid;gap:var(--s6)}
.rows .phi,.rows .phi-r{align-items:center}
.tile{background:var(--cream-2);border-radius:var(--r-xl);min-height:233px;position:relative}
.tile .shot{bottom:var(--s3)}
.feature .body{margin-top:var(--s3)}

/* ---------- tor zdania ---------- */
.scrub{height:200vh;background:var(--cream);border-block:1px solid var(--line)}
.scrub .m-stick{padding:0 var(--s5)}
.scrub p{font-family:var(--font-display);font-weight:700;font-size:var(--t4);line-height:var(--lh-display);letter-spacing:-.02em;max-width:24ch}

/* ---------- specyfikacja + karta stanu: 61,8 tabela / 38,2 karta ---------- */
.spec{display:grid;grid-template-columns:61.8fr 38.2fr;gap:var(--s4)}
.card{background:var(--white);border-radius:var(--r-xl);box-shadow:var(--e2);overflow:hidden}
.card .label{padding:var(--s4) var(--s5) var(--s3)}
.table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.table th,.table td{padding:var(--s3) var(--s5);border-top:1px solid var(--line);text-align:left;vertical-align:top}
.table th{font-family:var(--font-mono);font-size:var(--t-2);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);width:38.2%}
.table td{font-size:var(--t-1);color:var(--ink)}
.state{background:var(--navy-900);border-radius:var(--r-xl);padding:var(--s5);color:#fff;align-self:start}
.state .label{padding:0;color:var(--accent-light)}
.state .big{margin-top:var(--s3);font-family:var(--font-display);font-weight:700;font-size:var(--t3);line-height:var(--lh-display);letter-spacing:-.02em}
.state p{margin-top:var(--s3);font-size:var(--t-1);color:rgba(255,255,255,.72)}
.state a{color:var(--accent-light)}
.state a:hover{color:#fff}

/* ---------- strona prawna ---------- */
.legal-head{padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
.legal-head .meta{display:grid;gap:var(--s2);align-content:start}
.legal-head .lead{margin-top:var(--s3);font-size:var(--t0)}
.legal-body{padding-top:var(--s6)}
.toc{position:sticky;top:var(--s7);align-self:start}
.toc ul{display:grid;gap:var(--s2);margin-top:var(--s3)}
.toc a{font-size:var(--t-1);color:var(--accent)}
.toc a:hover{color:var(--accent-hover)}
.blocks{display:grid;gap:var(--s6)}
.blocks .prose{margin-top:var(--s3)}
.prose a{color:var(--accent)}
.prose a:hover{color:var(--accent-hover)}
.dash{margin-top:var(--s4);display:grid;gap:var(--s2);max-width:var(--measure)}
.dash li{display:grid;grid-template-columns:21px 1fr;gap:var(--s3);font-size:var(--t-1);color:var(--ink)}
.dash li i{display:block;width:13px;height:2px;background:var(--mark);margin-top:11px}

/* ---------- stopka ---------- */
.foot{background:var(--navy-900);color:#fff;padding:var(--s6) var(--s5)}
.foot .phi-r{align-items:center}
.foot .brand{color:#fff}
.foot .brand:hover{color:#fff}
.foot .brand img{width:26px}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:flex-end;font-family:var(--font-mono);font-size:var(--t-2);letter-spacing:.04em}
.foot nav a{color:rgba(255,255,255,.72)}
.foot nav a:hover{color:#fff;text-decoration:none}

/* ---------- telefon: kolumny phi składają się w jedną ---------- */
@media (max-width: 760px){
  .pad,.hero,.section,.foot,.scrub .m-stick{padding-left:var(--s4);padding-right:var(--s4)}
  .bar .wrap{padding:0 var(--s4);gap:var(--s3)}
  .bar nav{gap:var(--s3)}
  .bar nav .wide,.bar .inline{display:none}
  .phi,.phi-r,.spec{grid-template-columns:1fr;gap:var(--s5)}
  .rows .phi-r > .tile{order:2}
  .hero{padding-top:var(--s6)}
  .hero > i{height:var(--s6)}
  .hero .copy{padding-bottom:var(--s4)}
  .h1{font-size:var(--t4)}
  .h2{font-size:var(--t3)}
  .scrub p{font-size:var(--t3)}
  .device{min-height:233px}
  .section{padding-top:var(--s6);padding-bottom:var(--s6)}
  .toc{position:static}
  .table th{width:auto}
  .foot nav{justify-content:flex-start}
}