/* circlesco.tech · Products index only (title, rail + filters, the five sheets, close) */

/* ============ TITLE ============ */
.pr-hero{background:var(--white)}
.pr-hero-in{padding:calc(var(--nav-h) + clamp(84px,19vh,240px)) var(--gut) clamp(40px,6vh,88px)}
.pr-meta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:clamp(18px,3vh,40px)}
.pr-meta-l{display:inline-flex;align-items:center;gap:12px}
.pr-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px 64px}
.pr-title{font-weight:900;font-size:clamp(60px,13.5vw,260px);line-height:.86;letter-spacing:-.045em;margin-left:-.04em}
.pr-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.pr-title .w{display:inline-block;will-change:transform,filter}
.pr-title em{color:var(--blue)}
.pr-side{margin-left:auto;max-width:460px;display:flex;flex-direction:column;gap:14px}
.pr-statement{font-size:clamp(17px,1.4vw,22px);font-weight:500;line-height:1.3;letter-spacing:-.01em}

/* ============ INDEX: rail + list ============ */
.pr-index{padding:0 var(--gut) clamp(72px,9vw,140px);background:var(--white)}
.pr-index-in{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}

/* rail (sticky): filters, table of contents, count */
.pr-rail{position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;gap:28px;padding-top:6px}
.pr-filters{display:flex;flex-wrap:wrap;gap:8px}
.pr-filter{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:var(--r);background:var(--g1);font-weight:600;font-size:14px;transition:background .4s var(--ease),color .4s var(--ease)}
.pr-filter .mono{opacity:.55}
.pr-filter:hover{background:var(--g2)}
.pr-filter.is-on{background:var(--ink);color:#fff}
.pr-filter.is-on .mono{opacity:.7}
.pr-toc{border-top:1px solid var(--line)}
.pr-toc li a{display:grid;grid-template-columns:30px 1fr 10px;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:16px;letter-spacing:-.01em;opacity:.42;transition:opacity .4s var(--ease),padding-left .4s var(--ease)}
.pr-toc li a .mono{opacity:.8}
.pr-toc li.is-on a,.pr-toc li a:hover{opacity:1}
.pr-toc-dot{width:10px;height:10px;border-radius:50%;background:var(--c);opacity:0;transform:scale(.5);transition:opacity .4s var(--ease),transform .5s var(--ease);box-shadow:0 0 0 1.5px rgba(11,11,15,.12)}
.pr-toc li.is-on .pr-toc-dot{opacity:1;transform:none}
.pr-toc li.is-off a{opacity:.18;pointer-events:none}
.pr-count{margin-top:-10px}

/* the list */
.pr-list{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);min-width:0}
.pr-empty{padding:40px 0}

/* ============ SHEET (shared component for this page: a rounded color panel holding one product) ============ */
.sheet{--p:clamp(28px,3.6vw,60px);position:relative;border-radius:28px;padding:var(--p);overflow:hidden;color:#fff;scroll-margin-top:calc(var(--nav-h) + 16px);will-change:opacity}
.sheet.is-hidden{display:none}
.sheet-top{display:flex;align-items:center;gap:18px;margin-bottom:clamp(28px,3vw,44px)}
.sheet-no{opacity:.7}
.sheet-kind{opacity:.7}
.sheet-logo{height:28px;width:auto;object-fit:contain}
.sheet-logo.logo-white{filter:brightness(0) invert(1)}
.s-blup .sheet-logo{height:30px}
.s-kn .sheet-logo{height:30px}
.s-comm .sheet-logo{height:34px}
.sheet-name{font-weight:900;line-height:.88;letter-spacing:-.05em;margin:0 0 clamp(18px,2vw,28px) -.04em}
.sheet-pitch{font-weight:700;font-size:clamp(19px,1.55vw,26px);line-height:1.2;letter-spacing:-.02em;max-width:22em}
.sheet-desc{margin-top:14px;font-size:16px;line-height:1.45;max-width:40em;opacity:.84}
.sheet-facts{margin-top:clamp(22px,2.4vw,36px);border-top:1px solid currentColor;--rule:rgba(255,255,255,.18)}
.sheet-facts{border-top-color:var(--rule)}
.sheet-facts div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule)}
.sheet-facts dt{opacity:.6}
.sheet-facts dd{opacity:.95}
.sheet-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(22px,2.4vw,34px)}
.sheet-ext{opacity:.7;border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .4s var(--ease)}
.sheet-ext:hover{opacity:1}

/* colors: each product's own world */
/* owner rule: backgrounds only Circles blue, ink, white, grays; product colors stay inside screens and small accents */
.s-studio{background:#1264FF;color:#fff}
.s-blup{background:#0B0B0F;color:#fff}
.s-blup .sheet-name{color:#fff}
.s-kn{background:#F4F4F6;color:#0B0B0F}
.s-kn .sheet-facts{--rule:rgba(11,11,15,.14)}
.s-kinvy{background:#0B0B0F;color:#fff}
.s-kinvy .sheet-logo{height:32px}
.s-comm{background:#1264FF;color:#fff}
.s-tk{background:#0B0B0F;color:#fff}
.s-tk .sheet-name{color:#fff}

/* devices inside a sheet: a browser frame (the lead) and one upright iPhone on its lower third */
.sheet-vis{position:relative;min-width:0}
.sheet-vis .frame{position:relative;z-index:1}
.sheet-vis .frame>.screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0B0B0F}
.sheet-vis .frame>.screen.scr{background:#fff}
.sheet-vis .iph{position:absolute;z-index:4;bottom:0}
.sheet-vis.alt-l .iph{left:-3%}
.sheet-vis.alt-r .iph{right:-3%}

/* layout A: copy left, frame right (the phone hangs below the frame's lower corner) */
.lay-side{display:grid;grid-template-columns:minmax(0,37%) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.lay-side .sheet-name{font-size:clamp(48px,5.4vw,96px)}
.lay-side .sheet-vis{padding-bottom:10%}
.lay-side .sheet-vis .iph{width:26%}

/* layout B: copy on top (text + facts side by side), frame rising from the sheet's floor, phone on its lower-left third */
.lay-floor .sheet-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,38%);gap:clamp(24px,4vw,72px);align-items:end}
.lay-floor .sheet-name{font-size:clamp(48px,5.4vw,96px);margin-bottom:clamp(14px,1.6vw,22px)}
.lay-floor .sheet-pitch{max-width:16em}
.lay-floor .sheet-aside .sheet-desc{margin-top:0}
.lay-floor .sheet-aside .sheet-facts{margin-top:22px}
.lay-floor .sheet-aside .sheet-links{margin-top:24px}
.lay-floor .sheet-vis{margin:clamp(36px,4vw,64px) calc(-1*var(--p)) calc(-1*var(--p)) 0;padding-left:6%}
.lay-floor .sheet-vis .frame{width:80%;margin-left:auto;border-radius:14px 0 0 0;border-right:0;border-bottom:0}
.lay-floor .sheet-vis .iph{width:16%;bottom:6%;left:14%}
.lay-floor .sheet-vis.alt-r .iph{left:auto;right:auto;left:14%}

/* ============ CLOSE ============ */
.pr-close{padding:clamp(72px,9vw,140px) 0;background:var(--white);border-top:1px solid var(--line)}
.pr-close-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,120px);align-items:end}
.pr-close-big{font-weight:800;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.035em;max-width:18em}
.pr-close-side p{font-size:var(--t-lead);line-height:1.35;max-width:24em;color:var(--g3)}
.pr-close-links{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:24px}

/* ============ Responsive ============ */
@media (max-width:1180px){
  .pr-index-in{grid-template-columns:184px minmax(0,1fr)}
  .lay-side{grid-template-columns:minmax(0,42%) minmax(0,1fr)}
  .lay-floor .sheet-copy{grid-template-columns:1fr}
  .lay-floor .sheet-aside{max-width:520px}
  .lay-floor .sheet-aside .sheet-desc{margin-top:14px}
}
@media (max-width:900px){
  .pr-hero-in{padding-top:calc(var(--nav-h) + 12vh)}
  .pr-meta{flex-direction:column;align-items:flex-start;gap:8px}
  .pr-title{font-size:clamp(60px,17vw,96px)}
  .pr-side{margin-left:0;max-width:none}
  .pr-index-in{display:block}
  .pr-rail{position:static;margin-bottom:28px;gap:14px}
  .pr-filter{height:44px;padding:0 16px}
  .sheet-ext{display:inline-block;padding:11px 0}
  .pr-toc{display:none}
  .pr-count{margin-top:0}
  .sheet{border-radius:22px}
  .sheet-top{margin-bottom:22px}
  .lay-side,.lay-floor .sheet-copy{display:block}
  .lay-side .sheet-name,.lay-floor .sheet-name{font-size:clamp(48px,14vw,80px)}
  .lay-floor .sheet-aside{max-width:none}
  .lay-floor .sheet-aside .sheet-desc{margin-top:14px}
  .sheet-facts div{grid-template-columns:84px 1fr}
  .lay-side .sheet-vis,.lay-floor .sheet-vis{margin:32px 0 0;padding:0 0 12%}
  .lay-floor .sheet-vis{margin-right:calc(-1*var(--p));margin-bottom:calc(-1*var(--p));padding-bottom:0}
  .lay-floor .sheet-vis .frame{width:90%}
  .lay-side .sheet-vis .frame{width:92%;margin-left:auto}
  .sheet-vis .iph,.lay-floor .sheet-vis .iph,.lay-side .sheet-vis .iph{width:27%;left:-2%;right:auto;bottom:0}
  .lay-floor .sheet-vis .iph,.lay-floor .sheet-vis.alt-r .iph{bottom:8%;left:2%}
  .pr-close-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .pr-hero-in{padding-top:calc(var(--nav-h) + 13vh)}
  .sheet{--p:24px;border-radius:20px}
  .sheet-facts div{grid-template-columns:76px 1fr;gap:10px}
  .sheet-vis .iph,.lay-floor .sheet-vis .iph,.lay-side .sheet-vis .iph{width:25%;left:-1%}
  .lay-side .sheet-vis .frame{width:94%}
}
@media (prefers-reduced-motion:reduce){
  .pr-title .w,.sheet-vis [data-para],.sheet-copy>*{transform:none!important;filter:none!important;opacity:1!important}
}