.product-guide-page {
  --guide-width: min(1320px, 92%);
  --guide-ink: #fff;
  --guide-muted: #f1f6ff;
  --guide-accent: #eaf3ff;
  --guide-surface: #2068f4;
  --guide-line: #ffffff47;
  --guide-space: clamp(64px, 7vw, 112px);
  background: #004edf;
  color: var(--guide-ink);
  letter-spacing: .014em;
  line-height: 1.55;
}

body[data-page="catalog"] #site-header {background: #004edf}

.guide-product-nav,.guide-hero,.guide-stage,.guide-material,
.guide-design-section {
  width: var(--guide-width);
  margin-inline: auto;
}

.guide-eyebrow {
  font-size: 10px;
  letter-spacing: .14em;
}

.guide-product-nav {
  position: relative;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-block: 1px solid var(--guide-line);
  padding: 9px 1px;
  scrollbar-width: thin;
  scrollbar-color: #a9cbff transparent;
}

.guide-product-nav a {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 100px;
  color: #ecf4ff;
  padding: 8px clamp(10px, 1.15vw, 17px);
  text-decoration: none;
  font-size: 12px;
  transition: background-color .2s, color .2s;
}

.guide-product-nav a:hover {background: #ffffff24}
.guide-product-nav a:first-child {margin-inline-start: auto}
.guide-product-nav a:last-child {margin-inline-end: auto}
.guide-product-nav a[aria-current] {background: #eff5ff; color: #103f9f}
.guide-product-nav a:focus-visible {outline: 2px solid var(--guide-accent); outline-offset: 1px}

.guide-hero {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding-block: clamp(36px, 4vw, 60px) clamp(44px, 6vw, 86px);
}

.guide-hero-copy {position: relative; z-index: 1}
.guide-eyebrow {color: var(--guide-accent); margin: 0 0 16px}
.guide-product-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #a9cbff9c;
  border-radius: 100px;
  padding: 8px 14px;
  margin: 0;
  color: #fff;
  background: var(--guide-surface);
  font-size: 14px;
}

.guide-product-label > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a6d0ff;
  box-shadow: 0 0 0 3px #a6d0ff25;
}

.guide-hero-title {
  display: grid;
  justify-items: center;
  gap: .10em;
  font-size: clamp(34px, 7.15vw, 105px);
  line-height: 1.09;
  letter-spacing: -.024em;
  margin: 18px auto 20px;
  text-wrap: balance;
}

.guide-title-accent {
  max-width: 100%;
  color: white;
  background: var(--guide-surface);
  border-radius: 1em;
  padding: .035em .31em .12em;
}

.guide-description {
  max-width: 640px;
  margin: 0 auto 23px;
  color: var(--guide-ink);
  font-size: clamp(16px, 1.65vw, 23px);
  line-height: 1.5;
  text-wrap: balance;
}

[data-guide-reveal] > [aria-hidden] {
  color: color-mix(in srgb, var(--guide-ink) var(--guide-read, 100%), #bfd8ff);
}

.guide-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.guide-primary,.guide-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 17px;
  min-height: 47px;
  border-radius: 100px;
  padding: 11px 18px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color .2s, color .2s, transform .2s;
}

.guide-primary {background: #fff; color: #143e8c; border: 1px solid transparent}
.guide-primary:hover {background: #e4efff; transform: translateY(-2px)}
.guide-primary span,.guide-secondary span {font-size: 17px}
.guide-secondary {border: 1px solid #bfd8ffb0; color: #fff; background: var(--guide-surface)}
.guide-secondary:hover {background: #0b54d9; transform: translateY(-2px)}
.guide-own-design {color: var(--guide-muted); font-size: 12px; margin: 13px 0 0}

.guide-hero-seal {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.guide-hero-seal {
  display: grid;
  place-items: center;
  top: 45%;
  left: 2.3%;
  width: clamp(86px, 9.5vw, 134px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #d3e4ff;
  background: #f0f6ff;
  box-shadow: 0 14px 38px #092a7c42;
  transform: rotate(-16deg);
}

.guide-hero-seal svg {position: absolute; inset: 0; width: 100%; height: 100%}
.guide-hero-seal text {fill: #184682; font: 600 8px Outfit, sans-serif; letter-spacing: .13em}
.guide-hero-seal img {width: 31%; height: auto}



.guide-hero.is-in-view .guide-hero-seal svg {animation: guide-seal-turn 24s linear infinite}
@keyframes guide-seal-turn {to {transform: rotate(360deg)}}

.guide-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  margin-top: -21px;
  margin-bottom: var(--guide-space);
  padding: clamp(17px, 2.5vw, 36px);
  border-radius: 28px;
  color: #fff;
  background: var(--guide-surface);
}

.guide-stage-copy {padding: clamp(7px, 2.6vw, 39px)}
.guide-stage-polymailer .guide-stage-copy {padding-block: clamp(10px, 1.5vw, 22px)}
.guide-stage-copy h2 {
  font-size: clamp(33px, 4.1vw, 60px);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 15px;
}
.guide-stage-copy > p:not(.guide-eyebrow) {max-width: 34ch; margin: 0; color: var(--guide-muted); line-height: 1.68}

.guide-facts {margin: 24px 0 0; padding: 0; list-style: none}
.guide-facts li {
  display: flex;
  align-items: baseline;
  gap: 13px;
  padding: 11px 0;
  border-top: 1px solid #b9d5ff50;
}
.guide-facts span {font-size: 11px; letter-spacing: .08em; color: var(--guide-accent)}
.guide-facts strong {font-size: clamp(14px, 1.4vw, 19px)}

.guide-hero-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  height: clamp(320px, 34vw, 462px);
  margin: 0;
  border: 1px solid #b4cdf690;
  border-radius: 22px;
  background: radial-gradient(ellipse at 52% 41%, #e2edff 0%, #afcaff 48%, #83a8f0 100%);
}

.guide-hero-visual .product-canvas {position: relative; height: calc(100% - 34px); z-index: 1}
.guide-model-tools {
  position: absolute;
  inset: 14px 14px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 2;
  pointer-events: none;
}
.guide-model-tools span,.guide-spin-hint {
  width: max-content;
  max-width: calc(100% - 20px);
  border-radius: 100px;
  background: #f6faffee;
  color: #153a7d;
  font-size: 10px;
  padding: 7px 11px;
}
.guide-model-tools span {letter-spacing: .11em}
.guide-model-tools button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f8fbff;
  color: #123f89;
  font-size: 20px;
  pointer-events: auto;
}
.guide-model-tools button:hover {background: #fff; box-shadow: 0 3px 11px #173c7929}
.guide-spin-hint {position: absolute; z-index: 2; bottom: 9px; left: 50%; transform: translateX(-50%); text-align: center}
.guide-hero-visual .model-status {position: absolute; inset: 45% 20px auto; z-index: 3}

.guide-section-heading {max-width: 760px}
.guide-section-heading h2,.guide-size-section h2 {
  font-size: clamp(34px, 4.7vw, 67px);
  line-height: 1.13;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0 0 16px;
}

.guide-section-heading > p:not(.guide-eyebrow),
.guide-size-section > div > p:not(.guide-eyebrow) {
  color: var(--guide-muted);
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.7;
  margin: 0;
}

.guide-material {scroll-margin-top: 24px}
.guide-detail-cards {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin: 32px 0 var(--guide-space);
}
.guide-detail-cards article {
  min-width: 0;
  min-height: 196px;
  padding: clamp(19px, 2.5vw, 36px);
  border: 1px solid var(--guide-line);
  border-radius: 22px;
  background: var(--guide-surface);
}
.guide-card-index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--guide-accent);
  font-size: 11px;
  margin-bottom: clamp(21px, 3vw, 39px);
}
.guide-detail-cards h3 {font-size: clamp(20px, 2vw, 27px); margin: 0 0 11px}
.guide-detail-cards p {font-size: 14px; line-height: 1.72; margin: 0; color: var(--guide-muted)}

.guide-size-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  width: 100%;
  margin-bottom: var(--guide-space);
  padding-block: clamp(28px, 4vw, 58px);
  padding-inline: max(4%, calc((100% - 1320px) / 2));
  background: var(--guide-surface);
}

.guide-color-options,.guide-size-grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px}
.guide-color-options button,.guide-size-grid span {
  background: #0c55e4;
  color: #fff;
  border: 1px solid var(--guide-line);
  border-radius: 13px;
  padding: 13px 10px;
  font-size: 13px;
}
.guide-color-options {margin-top: 17px}
.guide-color-options button {display: flex; align-items: center; gap: 9px; text-align: left}
.guide-color-options button > span {flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--swatch); border: 1px solid #ffffff87}
.guide-color-options button:hover {border-color: #fff}
.guide-color-options button[aria-pressed=true] {border-color: #fff; color: #143d88; background: #f1f6ff}
.guide-size-grid {grid-template-columns: repeat(3,minmax(0,1fr))}
.guide-size-grid span {text-align: center}
.guide-size-section .guide-small {font-size: 12px !important; margin-top: 10px !important}
.guide-custom-size {
  display: flex;
  width: fit-content;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  background: #ff8a50;
  color: #321400;
  border-radius: 10px;
  font-size: 13px;
  text-decoration: none;
  padding: 11px 16px;
  margin-top: 14px;
}
.guide-custom-size:hover {background: #ffad82}
.guide-custom-size:focus-visible {outline: 2px solid #fff; outline-offset: 3px}
.guide-cord-photos {
  width: var(--guide-width);
  margin: 0 auto var(--guide-space);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}
.guide-cord-photos figure {margin: 0}
.guide-cord-photos img {display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f0f0f0; border-radius: 15px}
.guide-cord-photos figcaption {margin-top: 8px; color: var(--guide-muted); font-size: 14px}

.guide-design-section {margin-bottom: var(--guide-space)}
.guide-template-grid {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 26px}
.guide-template-grid button {
  min-width: 0;
  padding: 8px 8px 12px;
  border: 1px solid var(--guide-line);
  border-radius: 18px;
  background: var(--guide-surface);
  text-align: left;
  color: #fff;
  font-size: 14px;
  transition: transform .2s, box-shadow .2s;
}
.guide-template-grid button:hover {transform: translateY(-4px); box-shadow: 0 9px 23px #17427a21}
.guide-template-grid img {display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #f3f7fe; border-radius: 11px; margin-bottom: 10px}
.guide-template-grid button span {padding-inline: 4px}
.guide-text-button {padding: 12px 0; background: none; color: var(--guide-accent); font-size: 14px; margin-top: 15px}
.guide-text-button span {margin-left: 12px}

.guide-cta {
  text-align: center;
  padding: clamp(58px,8vw,113px) 20px;
  background: var(--guide-surface);
  color: #fff;
}
.guide-cta h2 {font-size: clamp(38px,6vw,83px); line-height: 1.12; letter-spacing: -.024em; margin: 15px 0 27px}
.guide-cta .guide-primary {background: #fff; color: #153d8a}
.guide-cta .guide-primary:hover {background: #e4efff}
.guide-cta > p:last-child {font-size: 13px; color: var(--guide-muted); margin: 17px 0 0}

@media (max-width: 960px) {
  .guide-hero-seal {left: 0}
  .guide-size-grid {grid-template-columns: repeat(2,minmax(0,1fr))}
}

@media (max-width: 720px) {
  .guide-hero-seal {display: none}
  .guide-hero-title {font-size: clamp(28px,8vw,58px)}
  .guide-stage {grid-template-columns: 1fr; border-radius: 22px}
  .guide-stage-copy {padding: 10px 6px 0}
  .guide-stage-copy > p:not(.guide-eyebrow) {max-width: none}
  .guide-hero-visual {height: clamp(290px,74vw,380px)}
  .guide-facts {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 18px}
  .guide-facts li {flex-direction: column; gap: 4px; padding: 7px 0}
  .guide-detail-cards {grid-template-columns: 1fr}
  .guide-detail-cards article {min-height: 0}
  .guide-card-index {margin-bottom: 15px}
  .guide-size-section {grid-template-columns: 1fr}
  .guide-template-grid {grid-template-columns: repeat(2,minmax(0,1fr))}
  .guide-stage-polymailer {
    gap: 12px;
  }
  .guide-stage-polymailer .guide-stage-copy {display: contents}
  .guide-stage-polymailer .guide-stage-copy > :is(p,h2,ul) {grid-column: 1 / -1; margin: 0}
  .guide-stage-polymailer .guide-color-options {
    grid-area: 5 / 1;
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin: 0;
    gap: 6px;
  }
  .guide-stage-polymailer .guide-color-options button {padding: 8px 6px; gap: 6px; font-size: 12px}
  .guide-stage-polymailer .guide-color-options button > span {width: 15px; height: 15px}
  .guide-stage-polymailer .guide-hero-visual {grid-area: 4 / 1; height: clamp(245px, 62vw, 340px)}
  .guide-stage-polymailer .guide-model-tools {inset: 9px 9px auto; gap: 4px}
  .guide-stage-polymailer .guide-model-tools span {font-size: 8px; padding: 6px}
  .guide-stage-polymailer .guide-model-tools button {flex: none; width: 27px; height: 27px; font-size: 17px}
}

@media (prefers-reduced-motion: no-preference) {
  .guide-hero-copy {animation: guide-intro-in .68s cubic-bezier(.2,.7,.3,1) both}
  @keyframes guide-intro-in {from {transform: translateY(15px); opacity: .68}}
  @supports (animation-timeline: view()) {
    .guide-detail-cards article,.guide-special,.guide-size-section,.guide-design-section {
      animation: guide-section-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    @keyframes guide-section-in {from {transform: translateY(18px)}}
  }
}
.guide-special{width:var(--guide-width);margin:0 auto var(--guide-space)}
.guide-special .guide-section-heading{margin-bottom:26px}
.guide-cutting-showcase{background:var(--guide-surface);border-radius:25px;padding:clamp(22px,4vw,48px);color:white}
.guide-cut-cards{overflow:hidden;scrollbar-width:none;padding:3px 0}
.guide-cut-track{display:flex;width:max-content}
.guide-cut-set{display:flex;gap:12px;padding-right:12px}
.guide-cut-card{display:grid;justify-items:center;align-content:center;width:clamp(140px,17vw,232px);flex:none;gap:6px;background:#ffffff12;color:white;border:1px solid #ffffff48;border-radius:10px;padding:14px 6px;font-size:12px;cursor:pointer}
.guide-cut-card svg{display:block;width:min(100%,94px);height:auto;fill:#fff}
.guide-cut-card span{border-radius:20px;padding:5px 8px;text-align:center}
.guide-cut-card:is(.is-selected,:hover,:active,:focus-visible) span{background:#ff8a50;color:#321400}
.guide-cut-card:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.guide-glow-card{transition:border-color .22s ease,box-shadow .22s ease}
.guide-glow-card:is(:hover,:active,.is-touched){
  border-color:#d5f3ff;box-shadow:0 0 5px #b8edff,0 0 15px #86cfffcc,0 0 25px #469eff66,inset 0 0 0 1px #d0edff80;
}
.guide-compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.guide-compare-grid.two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.guide-compare-card{background:var(--guide-surface);border:1px solid var(--guide-line);border-radius:20px;overflow:hidden;min-width:0}
.guide-compare-copy{padding:clamp(18px,2.6vw,30px)}
.guide-compare-copy h3,.guide-banner-details h3{margin:0 0 8px;font-size:clamp(19px,2vw,25px);color:var(--guide-ink)}
.guide-compare-copy p,.guide-compare-copy dd,.guide-color-result p{color:var(--guide-muted);font-size:14px;line-height:1.72;margin:0}
.guide-compare-copy dl{margin:12px 0 0}
.guide-compare-copy dt{font-weight:600;margin-top:12px}
.guide-detail-badge{display:inline-block;background:#e9f2ff;color:#184891;font-size:11px;border-radius:20px;padding:5px 9px;margin:0 0 9px}
.guide-lamination-showcase .guide-compare-card{display:flex;flex-direction:column}
.guide-lamination-showcase .guide-compare-copy{flex:1}
.guide-lamination-sample{position:relative;overflow:hidden;height:clamp(72px,10vw,134px)}
.guide-lamination-sample[data-finish="glossy"]{background:linear-gradient(115deg,#7fb4ff,#a7caff 55%,#73abfa)}
.guide-lamination-sample[data-finish="matte"]{background:#a6b3db}
.guide-lamination-sample[data-finish="natural"]{
  background:radial-gradient(circle at 1px 1px,#8b684819 .7px,transparent 1px) 0 0/5px 5px,#f4e7d3;
}
.guide-lamination-showcase .guide-lamination-sample{border-top:1px solid var(--guide-line)}
.guide-lamination-sample[data-finish="glossy"]::after{
  content:"";position:absolute;inset:-30% auto -30% 0;width:65%;
  background:linear-gradient(108deg,#fff0 12%,#ffffff15 36%,#ffffffb8 50%,#ffffff18 64%,#fff0 88%);
  animation:guide-glossy-shine 4.8s ease-in-out infinite paused;
}
.is-in-view .guide-lamination-sample[data-finish="glossy"]::after{animation-play-state:running}
@keyframes guide-glossy-shine{
  0%,15%{transform:translateX(-180%)}
  80%,100%{transform:translateX(330%)}
}
.guide-detail-photo{display:block;width:100%;height:100%;overflow:hidden}
.guide-stand-photos{display:grid;grid-template-columns:1fr .5fr;align-items:end;gap:12px;margin-top:14px;height:clamp(105px,20vw,250px);background:#f5f8ff;border-radius:8px;overflow:hidden}
.guide-stand-photos svg:last-child{height:50%}
.guide-banner-details{margin-top:clamp(36px,5vw,72px)}
.guide-banner-details h3{margin-bottom:18px}
.guide-banner-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.guide-banner-feature{
  min-width:0;padding:10px;background:var(--guide-surface);
  border:1px solid var(--guide-line);border-radius:22px;
}
.guide-banner-feature-image{
  display:grid;place-items:center;aspect-ratio:1.55;
  background:radial-gradient(ellipse,#e8f1ff,#b2cdfc);border-radius:14px;overflow:hidden;
}
.guide-banner-feature-image .guide-detail-photo{
  width:auto;height:78%;max-width:80%;max-height:180px;
  border-radius:10px;
}
.guide-banner-feature-caption{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:16px 6px 6px;
}
.guide-banner-feature-caption h4{margin:0;font-size:clamp(15px,1.6vw,22px)}
.guide-banner-feature-caption span{color:var(--guide-accent);font-size:14px}
.guide-sticker-defs{position:absolute}
.guide-sticker-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,36px)}
.guide-sticker-sample{display:grid;place-items:center;height:clamp(258px,33vw,430px)}
.guide-sticker-sample button>svg{display:block;width:100%;height:100%}
.guide-peel-sticker{
  display:block;height:min(84%,360px);max-width:86%;background:transparent;padding:0;min-width:0;border:0;
  filter:drop-shadow(0 6px 12px #082f7470);
}
.guide-peel-sticker:focus-visible{outline:2px solid #fff;outline-offset:3px}
.guide-sticker-sample.diecut .guide-peel-sticker{aspect-ratio:1;border-radius:50%}
.guide-sticker-sample.kisscut .guide-peel-sticker{
  aspect-ratio:905/943;border-radius:14px;overflow:hidden;
}
.guide-sticker-caption{max-width:50ch;margin:0 auto;padding:clamp(16px,2.5vw,26px);text-align:center}
.guide-sticker-caption h3{margin:0 0 8px;font-size:clamp(19px,2vw,25px);color:var(--guide-ink)}
.guide-sticker-caption p{color:var(--guide-muted);font-size:14px;line-height:1.65;margin:0}
.guide-print-colors{background:var(--guide-surface);padding:clamp(18px,4vw,48px);border-radius:25px}
.guide-color-diagram{
  float:right;width:clamp(44px,5vw,76px);height:auto;aspect-ratio:1;object-fit:contain;
  margin:0 0 8px 12px;animation:guide-color-orbit 10s linear infinite paused;
}
.guide-color-diagram.cmyk{animation-duration:13s;animation-direction:reverse}
.is-in-view .guide-color-diagram{animation-play-state:running}
@keyframes guide-color-orbit{to{transform:rotate(360deg)}}
.guide-color-result{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px}
.guide-color-swatches{display:flex;gap:8px;flex:none}
.guide-color-swatches span{padding:14px 20px;border-radius:8px;background:#0051ed;color:white;font-size:13px}
.guide-color-swatches span:last-child{background:#3976dc}
@media(max-width:560px){.guide-compare-grid,.guide-compare-grid.two-columns,.guide-sticker-examples,.guide-banner-feature-grid{grid-template-columns:1fr}.guide-color-result{align-items:flex-start;flex-direction:column}.guide-special .guide-section-heading{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){
  .guide-cut-cards{overflow:visible}
  .guide-cut-track{display:block;width:auto}
  .guide-cut-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));padding-right:0}
  .guide-cut-set[aria-hidden]{display:none}
  .guide-cut-card{width:auto}
  .guide-lamination-sample[data-finish="glossy"]::after{display:none}
  .guide-color-diagram{animation:none}
  .guide-primary,.guide-secondary,.guide-template-grid button,.guide-glow-card{transition:none}
}