/* Compact login composition. Content can grow at zoom or on short screens. */
.ck-auth-with-features {
  grid-template-columns:minmax(0,1fr) 420px;
  grid-template-rows:auto auto;
  align-content:start;
  min-height:100svh;
}
.ck-auth-with-features .ck-auth-hero { padding:28px 48px 18px; }
.ck-auth-with-features .ck-auth-hero-inner { justify-content:flex-start; padding:0; }
.ck-auth-with-features .ck-auth-logo { margin-bottom:20px; }
.ck-auth-with-features .ck-auth-headline { font-size:clamp(32px,3vw,48px); margin-bottom:16px; }
.ck-auth-with-features .ck-auth-lead { margin-bottom:16px; max-width:600px; font-size:15px; }
.ck-auth-with-features .ck-auth-hero-trust { margin-bottom:0; }
.ck-auth-with-features .ck-auth-badges { gap:6px; }
.ck-auth-with-features .ck-auth-badge { padding:5px 9px; font-size:11px; }
.ck-auth-with-features .ck-auth-preview { margin-top:18px; }
.ck-auth-with-features .ck-preview-panel { height:180px; overflow:auto; }
.ck-auth-with-features .ck-preview-panel>svg { width:100%; height:100%; }
.ck-auth-with-features .ck-auth-hero-footer { margin-top:10px; font-size:11px; }
.ck-auth-with-features .ck-auth-panel { align-items:center; justify-content:flex-start; padding:48px 28px 18px; }
.ck-auth-with-features .ck-auth-card { padding:24px; }
.ck-auth-with-features .ck-auth-card-sub { margin-bottom:18px; }
.ck-auth-with-features .ck-auth-form { gap:12px; }
.ck-auth-with-features #remember_me { min-height:16px; min-width:16px; margin:0; }
.ck-auth-with-features .ck-auth-divider { margin-top:14px; }
/* These repeated badges/copyright already appear in the hero. */
.ck-auth-with-features .ck-auth-trust,
.ck-auth-with-features .ck-auth-card-footer { display:none; }
.ck-auth-with-features .ck-auth-signup { margin-top:14px; }
.ck-auth-features {
  grid-column:1/-1; min-width:0; padding:18px 48px 24px;
  border-top:1px solid #ffffff12;
  background:radial-gradient(ellipse at 8% 20%,#175cd31a,transparent 55%),#0b1220;
}
.ck-auth-features-inner { max-width:1680px; margin-inline:auto; }
.ck-auth-features-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.ck-auth-features h2 { margin:0; color:#eaf1ff; font-size:16px; line-height:1.4; }
.ck-auth-features-heading>a { color:#9cc9ff; font-size:12px; text-decoration:none; }
.ck-auth-features-heading>a:hover { color:#fff; }
.ck-auth-features-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.ck-auth-feature {
  --feature-accent:#83b8ff; position:relative; min-width:0;
  display:grid; grid-template-columns:32px minmax(0,1fr); align-content:start; column-gap:10px; row-gap:6px;
  padding:16px 25px 16px 14px; border:1px solid #ffffff15; border-radius:12px;
  background:linear-gradient(145deg,#ffffff06,#ffffff02); color:#e9f1ff; text-decoration:none;
  transition:border-color .18s,background .18s,transform .18s;
}
.ck-auth-feature:hover { border-color:var(--feature-accent); background:#ffffff07; transform:translateY(-2px); color:#fff; }
.ck-auth-feature--team { --feature-accent:#5eead4; background:linear-gradient(115deg,#0f9f9a19,#175cd30d); border-color:#5eead429; }
.ck-auth-feature--three-d { --feature-accent:#c4a4ff; }
.ck-auth-feature--simulation { --feature-accent:#f0bc70; }
.ck-auth-feature--bom { --feature-accent:#79d6c5; }
.ck-auth-feature--inventory { --feature-accent:#91c7ed; }
.ck-auth-feature--procurement { --feature-accent:#b9b5ff; }
.ck-auth-feature-icon { display:flex; align-items:center; justify-content:center; grid-row:1/3; width:32px; height:32px; border-radius:9px; color:var(--feature-accent); background:#ffffff07; border:1px solid #ffffff10; }
.ck-auth-feature-icon svg { width:18px; height:18px; }
.ck-auth-feature h3 { align-self:center; color:#f0f5ff; font-size:14px; line-height:1.4; margin:0; }
.ck-auth-feature p { grid-column:2; margin:0; color:#a2b3ca; font-size:12px; line-height:1.5; }
.ck-auth-feature-arrow { position:absolute; right:10px; top:13px; font-size:13px; color:var(--feature-accent); }
.ck-auth-feature:focus-visible,.ck-auth-features-heading>a:focus-visible { outline:2px solid #5eead4; outline-offset:4px; }
/* Use spare desktop height for the actual preview, not an empty page tail. */
@media(min-width:1101px) {
  .ck-auth-with-features { grid-template-rows:minmax(min-content,1fr) auto; }
  .ck-auth-with-features .ck-auth-preview { display:flex; flex-direction:column; flex:1; min-height:0; }
  .ck-auth-with-features .ck-auth-preview-chrome { flex-shrink:0; }
  .ck-auth-with-features .ck-preview-panel { flex:1; min-height:180px; }
  .ck-auth-with-features .ck-preview-panel[data-preview-panel="schematic"] { position:relative; }
  .ck-auth-with-features .ck-preview-panel[data-preview-panel="schematic"]>svg { position:absolute; inset:0; }
  .ck-auth-with-features .ck-auth-panel { justify-content:center; }
}
@media(min-width:1101px) and (min-height:901px) {
  .ck-auth-with-features .ck-auth-hero { padding-top:36px; }
  .ck-auth-with-features .ck-auth-card { padding:32px; }
  .ck-auth-features { padding-block:clamp(22px,2.3svh,36px); }
  .ck-auth-features-grid { gap:16px; }
  .ck-auth-feature { min-height:clamp(106px,11svh,170px); align-content:center; padding:20px 30px 20px 18px; }
  .ck-auth-feature h3 { font-size:16px; }
  .ck-auth-feature p { font-size:14px; }
}
@media(min-width:1101px) and (max-height:800px) {
  .ck-auth-with-features .ck-auth-panel { padding-top:40px; }
  .ck-auth-with-features .ck-auth-card { padding:20px; }
  .ck-auth-with-features .ck-auth-form { gap:8px; }
  .ck-auth-with-features .ck-auth-hero { padding-top:20px; }
  .ck-auth-with-features .ck-auth-logo { margin-bottom:12px; }
  .ck-auth-with-features .ck-auth-headline { font-size:34px; margin-bottom:12px; }
  .ck-auth-with-features .ck-auth-lead { font-size:14px; margin-bottom:12px; }
  .ck-auth-with-features .ck-preview-panel { height:150px; min-height:150px; }
  .ck-auth-with-features .ck-auth-preview { margin-top:12px; }
  .ck-auth-feature { padding-block:12px; }
  .ck-auth-features { padding-top:14px; padding-bottom:18px; }
}
@media(max-width:1100px) {
  .ck-auth-with-features { grid-template-columns:minmax(0,1fr) 380px; }
  .ck-auth-with-features .ck-auth-hero { padding-inline:24px; }
  .ck-auth-with-features .ck-auth-panel { padding-inline:20px; }
  .ck-auth-features { padding-inline:24px; }
  .ck-auth-features-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:768px) {
  .ck-auth-with-features { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; }
  .ck-auth-with-features .ck-auth-hero { padding:28px 24px 24px; }
  .ck-auth-with-features .ck-auth-headline { font-size:30px; }
  .ck-auth-with-features .ck-auth-panel { padding:24px; }
  .ck-auth-with-features .ck-auth-card { max-width:440px; }
  .ck-auth-features-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .ck-auth-with-features .ck-auth-card-footer { display:block; }
}
@media(max-width:560px) {
  .ck-auth-features-grid { grid-template-columns:minmax(0,1fr); }
  .ck-auth-features { padding:24px; }
  .ck-auth-with-features .ck-auth-preview-url { display:none; }
  .ck-auth-with-features .ck-preview-panel { height:auto; min-height:120px; }
  .ck-auth-with-features .ck-preview-panel>svg { height:auto; }
  .ck-auth-feature { padding:18px 28px 18px 16px; }
}
@media(prefers-reduced-motion:reduce) { .ck-auth-feature { transition:none; } .ck-auth-feature:hover { transform:none; } }
