/* A quieter hierarchy: introduction, original product story, personal choices.
   Load after light.css, atmosphere.css, light-stage.css and name-preview.css.
   The product animation itself and all engraving font rules stay unchanged. */
.light-hero-grid{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  grid-template-areas:"intro stage" "config stage";
  grid-template-rows:auto 1fr;
  column-gap:38px;
  row-gap:0;
  align-items:start;
  min-height:0;
  padding-block:30px 32px;
}
.light-hero-copy{grid-area:intro;padding-block:30px 0}
.light-hero-copy>.eyebrow{margin-bottom:21px}
.light-hero-copy h1{margin-bottom:20px}
.light-hero-copy .light-intro{max-width:430px;margin-bottom:0;line-height:1.75}
.light-hero-config{grid-area:config;min-width:0;width:100%;position:relative;z-index:2}
.light-hero-config .name-preview-form{margin-top:24px}
.light-hero .light-product-stage{
  grid-area:stage;
  align-self:center;
  height:710px;
  padding:20px;
  gap:12px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0;
}
.light-hero .light-stage-scissor{width:min(196px,42cqw);top:50%}
.light-hero .light-stage-box{width:min(89%,440px);height:87%;top:48%}
.light-hero .light-stage-caption{min-height:100px;max-width:470px}
.light-hero .light-stage-rays{opacity:.48}
.light-hero .light-stage-orbit{border-color:#6c929833}
.light-hero .light-stage-orbit-two{border-color:#b59e7e36}
.light-hero .light-stage-controls{border-top-color:#53768035}
.name-preview-price{margin:18px 0 0;padding-top:15px;border-top:1px solid #708f972e}
.name-preview-price p{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin:0;color:#233e45;font-size:12px;line-height:1.5}
.name-preview-price strong{font-size:26px;font-weight:500;letter-spacing:-.025em;line-height:1.25;white-space:nowrap}
.name-preview-price small{display:block;margin-top:6px;max-width:410px;font-size:10.5px;line-height:1.6;color:#465e64}
.light-hero-config .name-preview-form .light-hero-actions{margin-top:15px}
#gestalten-vorschau{scroll-margin-top:115px}
@media(min-width:861px) and (max-width:1100px){
  .light-hero-grid{column-gap:22px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .light-hero-copy{padding-top:18px}
  .light-hero .light-product-stage{padding-inline:10px}
  .light-hero-copy h1{font-size:clamp(35px,4vw,43px)}
}
@media(max-width:860px){
  .light-hero-grid{display:flex;flex-direction:column;align-items:center;gap:0;padding-top:29px;padding-bottom:29px}
  .light-hero-copy{width:100%;max-width:560px;text-align:center;padding:0}
  .light-hero-copy>.eyebrow{justify-content:center;margin-bottom:17px}
  .light-hero-copy h1{font-size:clamp(32px,6.5vw,47px);line-height:1.23;text-align:center;margin:0 0 16px;max-width:none}
  .light-hero-copy .light-intro{max-width:410px;margin:0 auto;font-size:14px;line-height:1.7}
  .light-hero .light-product-stage{width:100%;max-width:550px;height:auto;grid-template-rows:300px auto auto;margin-top:20px;padding:0 10px;gap:10px}
  .light-hero .light-stage-scissor{width:108px;top:46%}
  .light-hero .light-stage-box{width:min(86%,292px);height:89%;top:49%}
  .light-hero .light-stage-caption{min-height:0;max-width:440px}
  .light-hero .light-stage-caption-title{font-size:14px!important;margin-bottom:5px!important}
  .light-hero .light-stage-caption-text{font-size:13px!important;line-height:1.45!important}
  .light-hero .light-stage-caption-note{font-size:11px!important;line-height:1.45!important;margin-top:6px!important}
  .light-hero .light-stage-controls{padding-top:10px}
  .light-hero-config{max-width:480px;margin-top:23px}
  .light-hero-config .name-preview-form{max-width:none;margin:0 auto}
  .light-hero-config .name-preview-fields legend{text-align:center}
  .light-hero-config .name-preview-colors legend{width:100%;text-align:center}
  .light-hero-config .name-preview-form .name-preview-hint{text-align:center}
  .light-hero-config .name-preview-fields legend>span{display:inline}
  .light-hero-config .name-preview-mobile{display:flex;align-items:center;justify-content:center;gap:9px;margin:3px auto 0;padding:8px 5px;min-height:40px;font-size:12px;color:#25454e;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b4c4c9}
  .light-hero-config .name-preview-form .light-hero-actions{flex-direction:row;align-items:center;justify-content:center;gap:4px 16px}
  .name-preview-price{text-align:center;margin-top:15px}
  .name-preview-price p{justify-content:center}
  .name-preview-price small{margin-inline:auto}
}
@media(max-width:650px){
  .light-hero .light-product-stage{grid-template-rows:266px auto auto;max-width:430px;padding-inline:0;margin-top:17px;gap:9px}
  .light-hero .light-stage-scissor{width:96px;top:45%}
  .light-hero .light-stage-box{width:min(86%,260px);height:87%;top:49%}
  .light-hero .light-stage-mark,.light-hero .light-stage-scene-number{top:2px}
  .light-hero .light-stage-orbit{width:94%;height:67%;top:49%}
  .light-hero .light-stage-orbit-two{width:69%;height:84%}
  .light-hero .light-stage-ground{top:91%}
  .light-hero .light-stage-controls{padding-top:9px}
  .light-hero .light-stage-chapters button{min-height:44px}
  .light-hero-config{margin-top:23px}
  #gestalten-vorschau{scroll-margin-top:95px}
}
@media(max-width:380px){
  .light-hero-copy h1{font-size:30px}
  .light-hero-copy .light-intro{font-size:13px;max-width:300px}
  .name-preview-price small{max-width:260px}
}