/* The public label-gallery homepage. Shared shell: site.css. */
@font-face { font-family:'Poppins'; src:url('assets/fonts/poppins-ExtraBold-latin.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
.home { --ink:#102a3d; --body:#405b70; --muted:#5b6f82; --blue:#0868f6; --blue-deep:#0753bd; --line:#dce5ef; background:#fcfdff; }
.home::before { display:none; }
.home .container { width:min(1316px,calc(100% - 64px)); }
.home .site-header { background:#fcfdff; }
/* the header matches every other page (site.css), so moving between pages doesn't shift it */
.home .btn { border-radius:9px; }
.home .gallery-hero { background:none; padding:16px 0 0; overflow:clip; }
.home .hero-copy { text-align:center; margin:0 auto; max-width:1200px; }
.home .hero h1 { max-width:none; margin:0; color:#1f2328; font-size:clamp(34px,3.4vw,50px); font-weight:700; letter-spacing:-.035em; line-height:1.14; text-wrap:balance; }
/* "barcode labels" as a white label stuck on the headline; the comma stays attached to it. */
.chip-keep { white-space:nowrap; }
.hero-chip { position:relative; display:inline-block; margin:0 .02em 0 .06em; padding:.02em .3em .07em; border-radius:11px;
  background:#fff; border:1px solid #dde4ec; transform:rotate(-2.5deg); transform-origin:50% 60%;
  box-shadow:0 1px 0 #10233a0d,0 2px 3px -1px #10233a1f,0 10px 18px -12px #10233a59; }
.hero-chip::after { content:''; position:absolute; top:-1px; right:-1px; width:14px; height:14px; border-top-right-radius:11px; border-bottom-left-radius:5px;
  background:linear-gradient(225deg,#fcfdff 0 47%,#e9eef4 53% 100%); box-shadow:-1px 1px 2px -1px #10233a40; }
@media (prefers-reduced-motion:no-preference) { html:not([data-motion=paused]) .hero-chip { animation:chip-stick .38s cubic-bezier(.22,1,.36,1) .15s both; } }
@keyframes chip-stick { from { transform:translateY(-5px) rotate(-6deg) scale(1.04); box-shadow:0 14px 22px -10px #10233a59; } to { transform:rotate(-2.5deg); } }
.home .hero-lead { max-width:56ch; margin:30px auto 0; font-size:16px; line-height:1.5; text-wrap:balance; }
.home .hero-actions { flex-direction:row; align-items:center; justify-content:center; margin:11px 0 0; gap:26px; }
.home .hero-actions .btn { width:auto; min-height:44px; padding:10px 27px; font-size:14px; gap:10px; box-shadow:0 6px 13px -7px #0768f6; }
.hero-template-link { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; color:var(--ink); font-size:14px; font-weight:500; }
.hero-template-link:hover { color:var(--blue-deep); }
.action-arrow { filter:brightness(0) invert(1); }
.home .hero-note { display:flex; justify-content:center; align-items:center; gap:6px; max-width:none; font-size:11px; line-height:18px; margin:4px auto 0; }
.home .hero-note img { filter:invert(39%) sepia(93%) saturate(453%) hue-rotate(111deg) brightness(89%) contrast(91%); }
.home .studio { margin:7px auto 0; scroll-margin-top:86px; }
.home .try { display:grid; grid-template-columns:230px minmax(190px,1fr) 112px minmax(180px,.8fr) 414px; align-items:start; gap:14px; max-width:none; margin:0; padding:11px 20px; background:#fff; border:1px solid #d7e2ef; border-radius:14px; box-shadow:0 9px 25px -23px #426383; }
.studio-intro { align-self:stretch; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--line); padding:0 20px; position:relative; }
.studio-intro::before { content:''; position:absolute; top:16px; left:5px; width:8px; height:8px; border-radius:50%; background:#0b946c; }
.studio-intro h2 { font-size:17px; line-height:1.4; letter-spacing:-.04em; margin:0 0 3px; }
.studio-intro p { font-size:12px; line-height:1.5; color:var(--muted); margin:0; max-width:24ch; }
.home .try .field { display:flex; flex-direction:column; gap:6px; min-width:0; grid-column:auto; }
.home .try label { font-size:11px; line-height:1.5; font-weight:500; color:var(--ink); }
.home .try input { width:100%; min-width:0; min-height:44px; border-radius:7px; background:#fff; border:1px solid #d3dfec; padding:8px 10px; font-size:16px; line-height:1.5; }
.home .try input:focus { outline:2px solid #9dc1ff; outline-offset:1px; box-shadow:none; border-color:var(--blue); }
.home .try input[aria-invalid=true] { border-color:#b7352b; background:#fff8f7; }
.field-example { font-size:10px; line-height:1.5; color:#61778c; }
.home .field-error { font-size:11px; line-height:1.4; color:#a02721; margin:0; }
.home .sizes { align-self:center; grid-column:auto; background:none; padding:0; border-radius:0; gap:7px; }
.home .sizes button { min-width:0; min-height:46px; padding:7px 9px; background:#f3f6fa; border:1px solid transparent; border-radius:7px; font-size:12px; line-height:1.4; color:#4b6177; }
.home .sizes button:hover { background:#ebf1fa; color:#0753bd; }
.home .sizes button[aria-pressed=true] { background:#edf4ff; color:#0753bd; border-color:#a7c8ff; box-shadow:none; }
.gallery-frame { position:relative; }
.home .label-gallery { height:308px; min-height:0; display:block; perspective:none; isolation:isolate; overflow:visible; scroll-margin-top:100px; }
.gallery-card { position:absolute; left:50%; top:50%; width:var(--card-width,290px); height:var(--card-height,360px); transform:translate(calc(-50% + var(--offset)),calc(-50% + var(--drop,0px))) rotate(var(--angle,0deg)); transform-origin:50% 75%; pointer-events:none; }
.gallery-card>img { width:100%; height:100%; display:block; object-fit:contain; }
.gallery-sample>img { filter:drop-shadow(0 18px 14px #24445b24); }
.gallery-shipping { --offset:-500px; --angle:-13deg; --drop:20px; --card-width:260px; --card-height:320px; z-index:1; }
.gallery-salt { --offset:-285px; --angle:-7deg; --drop:0px; --card-width:270px; --card-height:335px; z-index:2; }
.gallery-tag { --offset:300px; --angle:8deg; --drop:0px; --card-width:260px; --card-height:320px; z-index:2; }
.gallery-banana { --offset:490px; --angle:13deg; --drop:20px; --card-width:260px; --card-height:325px; z-index:1; }
.gallery-main { --offset:0px; --drop:8px; --card-width:296px; --card-height:auto; z-index:3; height:auto; }
.label-gallery[data-label-type=ship] .gallery-main { --drop:0px; }
.studio-assembly { width:100%; }
.home .sheet { position:relative; width:100%; padding:13px; transform:none; border:0; border-radius:3px; background:#d9b98f url('assets/gallery/kraft.webp') center/cover; box-shadow:0 16px 30px -18px #273f5866; transition:none; }
.home .label { width:100%; position:relative; transform:none; border-radius:9px; box-shadow:0 3px 8px #6147271f; border:1px solid #eee; color:#101010; background:#fff; overflow:hidden; }
.home .label::before,.home .label::after { display:none; }
.home .sticker { min-height:228px; display:flex; flex-direction:column; gap:5px; padding:13px; }
.home .sticker .l-name { font-size:20px; line-height:1.25; font-weight:700; }
.home .sticker .l-price { font-size:24px; line-height:1.4; }
.home .sticker .l-small { font-size:8px; font-weight:400; white-space:nowrap; }
.home .bc { width:100%; max-width:242px; margin:4px auto 0; }
.home .sticker .bc { margin-top:auto; padding-top:6px; }
.home .bc svg { width:100%; height:auto; }
.home .ship { min-height:244px; display:grid; grid-template-rows:auto auto 1fr auto; gap:6px; padding:11px; font-size:11px; line-height:1.35; }
.home .ship .to { font-size:11px; padding:7px 9px; border-radius:5px; }
.home .ship .to b { font-size:13px; }
.home .ship .to small { font-size:9px; }
.home .ship .l-name { font-size:12px; line-height:1.4; }
/* Label roll: the centre card is the roll's liner (backing paper), the same size as the other formats' cards, with the
   roll's core along its top edge and two small copies of the live label on it, a die-cut gap between them and the
   liner running on past the bottom edge. Only the label stock and black print, no colour. */
.label-gallery[data-label-type=roll] .sheet { padding:0; background:none; box-shadow:none; }
.home .roll { display:block; position:relative; width:100%; height:259px; margin:0; padding:0; min-height:0; border:1px solid #e0d9ca; border-radius:2px; background:#f2eee6; box-shadow:0 16px 30px -18px #273f5866; overflow:hidden; }
.roll-core { position:absolute; left:0; right:0; top:0; height:16px; z-index:2; border-radius:6px/8px; background:linear-gradient(180deg,#cdc6b7,#f3f0ea 30%,#fff 50%,#ece7dd 75%,#c8c0b0); box-shadow:0 4px 7px -4px #3d2b1466; }
.roll-core::after { content:''; position:absolute; right:0; top:0; bottom:0; width:9px; border-radius:50%; border:1px solid #d2cbbd; background:radial-gradient(ellipse closest-side,#4b3a28 0 24%,#b38b5e 25% 44%,transparent 45%),repeating-radial-gradient(ellipse closest-side,#fbf9f4 0 1.5px,#e2dccf 1.5px 2.5px); }
.roll-liner { position:absolute; inset:0; display:flex; flex-direction:column; gap:8px; padding:26px 12px 0; }
.home .roll .mini { flex:none; height:108px; display:grid; grid-template-columns:minmax(0,1fr) 116px; gap:8px; align-items:center; padding:8px 9px; text-align:left; transform:none; background:#fff; border:0; border-radius:6px; box-shadow:0 0 0 1px #e4dfd4,0 1px 2px #6147271a; }
.home .roll .mini-text { min-width:0; }
.home .roll .l-name { font-size:16px; line-height:1.2; font-weight:700; overflow-wrap:anywhere; }
.home .roll .l-price { margin-top:3px; font-size:15px; line-height:1.3; font-weight:700; white-space:nowrap; }
.home .roll .l-small { font-size:7px; line-height:1.2; font-weight:400; }
.home .roll .bc { width:100%; max-width:none; margin:0; padding:0; }
.home .roll .bc svg { display:block; }
.home .sticker.wide-price .l-price { font-size:18px; }
.home .sticker.wide-price .l-small { display:block; line-height:1.4; }
.home .sticker.long-name .l-name { font-size:15px; }
.gallery-navigation { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; margin:0 -28px; z-index:5; }
.gallery-arrow { width:48px; height:48px; display:grid; place-items:center; padding:0; flex:none; border:1px solid #d6e2ee; border-radius:50%; background:#fff; color:var(--ink); cursor:pointer; pointer-events:auto; box-shadow:0 2px 6px #16375204; }
.gallery-arrow:hover { border-color:#a7c8ff; background:#f3f7ff; }
.gallery-arrow:active { background:#e8f1ff; }
.gallery-footer { position:relative; display:flex; justify-content:center; align-items:center; gap:12px; min-height:44px; margin-top:2px; }
.gallery-open { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 16px; border:1px solid #cbd9e4; border-radius:9px; background:#fff; color:var(--ink); font:500 13px/1.3 var(--font); cursor:pointer; }
.gallery-open:hover { border-color:var(--blue); background:#f0f6ff; color:var(--blue-deep); }
.gallery-open:disabled { opacity:.5; cursor:not-allowed; }
.gallery-note { font-size:11px; line-height:1.4; color:var(--muted); }
.home .gallery-motion { position:absolute; right:-24px; top:50%; translate:0 -50%; width:40px; height:40px; min-height:0; padding:0; border-radius:50%; color:var(--ink); }
.home .gallery-motion:hover:not(:disabled) { border-color:var(--blue); color:var(--blue-deep); background:#f0f6ff; }
.trust-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0; list-style:none; margin:20px auto 0; padding:0; font-size:12px; line-height:1.5; color:var(--muted); }
.trust-strip li { padding:0 20px; }
.trust-strip li+li { border-left:1px solid var(--line); }
.editor-section { padding:30px 0 36px; }
.editor-copy { max-width:58ch; margin:0 auto 26px; text-align:center; }
.editor-copy h2 { font-size:clamp(26px,2.6vw,34px); line-height:1.25; letter-spacing:-.045em; margin:0 0 8px; }
.editor-copy p { margin:0; font-size:15px; line-height:1.7; color:var(--body); }
.editor-shot { max-width:1180px; margin:0 auto; border:1px solid #d7e2ef; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 24px 50px -38px #15364d; }
.editor-shot img { display:block; width:100%; height:auto; }
html[data-entrance=pending] .home [data-enter]:not(h1),html[data-entrance=running] .home [data-enter]:not(h1),
html[data-entrance=pending] .home .gallery-sample,html[data-entrance=running] .home .gallery-sample { opacity:0; }
html[data-entrance=pending] .home h1[data-enter],html[data-entrance=running] .home h1[data-enter] { transform:translateY(12px); }
/* If the motion script never runs, show everything after a moment. */
html[data-entrance=pending] .home [data-enter]:not(h1),html[data-entrance=pending] .home .gallery-sample { animation:tv-show .01s 1.6s forwards; }
html[data-entrance=pending] .home h1[data-enter] { animation:tv-settle .01s 1.6s forwards; }
@keyframes tv-show { to { opacity:1; } }
@keyframes tv-settle { to { transform:none; } }
.home .flat-view .gallery-sample { visibility:hidden; }
.home .flat-view .gallery-main { transform:translate(-50%,-50%)!important; }
.home .flat-view .sheet { background:none; box-shadow:none; padding:0; }
.home .flat-view .studio-assembly { transform:none; }
.no-js .gallery-footer { display:none; }
.no-js .home .try { display:none; }
.no-js-preview { text-align:center; font-size:13px; color:var(--muted); margin:8px 0; }
.workflow-section { margin-top:12px; padding:0 0 54px; }
.workflow-section>.container { border-top:1px solid #d7e1ec; padding-top:28px; }
.workflow-section h2 { text-align:center; font-size:29px; line-height:1.3; margin:0 0 30px; letter-spacing:-.045em; }
.workflow-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; margin:0; padding:0 22px; }
.workflow-steps li { display:grid; grid-template-columns:38px 38px minmax(0,1fr); align-items:start; gap:18px; padding:0 30px; }
.workflow-steps li+li { border-left:1px solid var(--line); }
.workflow-number { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#edf4ff; font-size:18px; font-weight:500; color:var(--blue); }
.workflow-steps li>img { margin-top:3px; filter:invert(28%) sepia(94%) saturate(2536%) hue-rotate(210deg) brightness(100%) contrast(104%); }
.workflow-steps h3 { font-size:17px; line-height:1.35; margin:0 0 3px; }
.workflow-steps p { max-width:27ch; font-size:13px; line-height:1.5; margin:0; color:#61758a; }
.home .section { padding:80px 0; background:none; }
.home .section-head h2,.home .split-copy h2 { font-size:clamp(29px,3vw,40px); }
.home .section-head p { font-size:16px; }
.home .split { gap:64px; }
.home .split+.split { margin-top:90px; }
.home .split-copy>p { font-size:15px; line-height:1.8; }
.home .tick-list li { font-size:14px; line-height:1.7; }
.home .split-fine { font-size:12px!important; }
.home .panel { transform:none; border-radius:14px; box-shadow:0 16px 35px -29px #15364d; }
.home .tpl-pic img { transform:none!important; }
.home .tpl-card h3 { font-size:14px; }
.home .tpl-card p { font-size:12px; }
.home .faq-grid { grid-template-columns:.7fr 1.3fr; gap:70px; }
.home .final-cta { padding-top:0; }
.home .final-cta-inner { border-radius:16px; }
@media(max-width:1320px) {
  .home .try { grid-template-columns:155px minmax(160px,1.3fr) 95px minmax(160px,1fr) minmax(260px,1.5fr); padding:16px; gap:10px; }
  .studio-intro { padding-right:12px; }
  .studio-intro h2 { font-size:15px; }
  .studio-intro p { font-size:11px; }
  .home .sizes button { font-size:11px; padding:8px 6px; }
  .gallery-shipping { --offset:-440px; --card-width:260px; }
  .gallery-salt { --offset:-265px; --card-width:270px; }
  .gallery-tag { --offset:265px; --card-width:260px; }
  .gallery-banana { --offset:440px; --card-width:255px; }
  .workflow-steps { padding:0; }
  .workflow-steps li { padding:0 20px; gap:14px; }
}
@media(max-width:1050px) {
  .home .try { grid-template-columns:minmax(0,1.3fr) 100px minmax(0,1fr); }
  .studio-intro { grid-column:1/-1; padding:0; border:0; flex-direction:row; align-items:baseline; justify-content:flex-start; gap:15px; }
  .studio-intro::before { display:none; }
  .studio-intro p { max-width:none; }
  .home .sizes { grid-column:1/-1; }
  .home .sizes button { min-height:44px; font-size:13px; }
  .gallery-shipping { --offset:-365px; --card-width:230px; }
  .gallery-salt { --offset:-245px; --card-width:230px; }
  .gallery-tag { --offset:245px; --card-width:235px; }
  .gallery-banana { --offset:365px; --card-width:230px; }
  .home .gallery-hero { padding-top:26px; }
  .workflow-steps li { grid-template-columns:32px 30px minmax(0,1fr); gap:12px; padding:0 14px; }
  .workflow-steps p { font-size:12px; }
}
@media(max-width:760px) {
  .home .container { width:calc(100% - 36px); }
  .home .gallery-hero { padding-top:12px; }
  .home .hero h1 { font-size:clamp(24px,7.1vw,30px); letter-spacing:-.035em; line-height:1.2; }
  .hero-chip { border-radius:9px; padding:.01em .26em .06em; }
  .hero-chip::after { width:11px; height:11px; border-top-right-radius:9px; }
  .home .hero-lead { max-width:44ch; font-size:13.5px; line-height:1.5; margin-top:12px; }
  .home .hero-actions { margin-top:10px; gap:16px; }
  .home .hero-actions .btn { min-height:46px; padding:11px 14px; gap:7px; font-size:12px; }
  .home .hero-actions .action-arrow { width:16px; height:16px; }
  .hero-template-link { font-size:12px; gap:6px; }
  .hero-template-link img { width:16px; height:16px; }
  .home .hero-note { font-size:11px; margin-top:4px; }
  .home .studio { margin-top:7px; scroll-margin-top:80px; }
  .home .try { grid-template-columns:84px minmax(0,1fr); padding:10px; gap:10px; border-radius:12px; }
  .studio-intro { gap:8px; flex-direction:column; align-items:flex-start; }
  .studio-intro h2 { font-size:16px; margin:0; }
  .studio-intro p { display:none; }
  .home .try label { font-size:11px; }
  .home .try input { min-height:44px; font-size:16px; }
  .home .try .field-name { grid-column:1/-1; }
  .home .try .field-code { grid-column:2; }
  .field-example { font-size:10px; }
  .home .sizes { gap:5px; }
  .home .sizes button { font-size:11px; padding:7px 4px; min-height:44px; }
  .home .label-gallery { height:322px; overflow:clip; margin:0 -18px; }
  .gallery-main { --card-width:282px; }
  .home .sheet { padding:12px; }
  .home .sticker { min-height:245px; padding:12px; }
  .home .sticker .l-name { font-size:17px; }
  .home .sticker .l-price { font-size:20px; }
  .home .sticker .l-small { font-size:7px; }
  .home .bc { max-width:232px; }
  .home .ship { min-height:278px; }
  .home .roll { height:269px; }
  .home .roll .mini { height:113px; grid-template-columns:minmax(0,1fr) 112px; }
  .gallery-shipping { --offset:-310px; --card-width:225px; --drop:20px; }
  .gallery-salt { --offset:-195px; --card-width:230px; --drop:4px; }
  .gallery-tag { --offset:200px; --card-width:225px; --drop:0px; }
  .gallery-banana { --offset:315px; --card-width:220px; --drop:20px; }
  .gallery-navigation { position:static; inset:auto; height:44px; margin:0; justify-content:center; gap:18px; pointer-events:auto; }
  .gallery-arrow { width:44px; height:44px; background:#ffffffed; }
  .gallery-footer { flex-wrap:wrap; gap:4px 10px; }
  .gallery-open { min-height:44px; }
  .home .gallery-motion { position:static; translate:none; width:44px; height:44px; }
  .gallery-note { order:3; flex-basis:100%; text-align:center; }
  .trust-strip { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:18px; font-size:11.5px; text-align:center; }
  .trust-strip li { padding:0; border:0!important; }
  .editor-section { padding:20px 0 48px; }
  .editor-copy p { font-size:14px; }
  .editor-shot { border-radius:10px; }
  .workflow-section { margin-top:18px; padding-bottom:20px; }
  .workflow-section>.container { padding-top:25px; }
  .workflow-section h2 { font-size:24px; line-height:1.35; margin-bottom:22px; }
  .workflow-steps { grid-template-columns:1fr; gap:22px; padding:0 10px; }
  .workflow-steps li { border:0!important; padding:0; grid-template-columns:34px 34px minmax(0,1fr); gap:16px; }
  .workflow-steps h3 { font-size:16px; }
  .workflow-steps p { font-size:13px; max-width:38ch; }
  .home .section { padding:55px 0; }
  .home .split,.home .faq-grid { grid-template-columns:1fr; gap:32px; }
  .home .split.reverse .split-copy { grid-row:1; }
  .home .split+.split { margin-top:64px; }
  .home .section-head p,.home .split-copy>p { font-size:14px; }
  .home .tpl-card h3 { font-size:12px; }
  .home .tpl-card p { font-size:11px; }
}
@media(max-width:360px) {
  .home .hero-lead { font-size:12.5px; }
  .home .hero-template-link,.home .hero-note { display:none; }
  .home .studio-intro p { display:none; }
  .home .try { padding:12px; }
  .home .gallery-main { --card-width:276px; }
  .home .sheet { padding:10px; }
  .home .sticker { padding:11px; }
  .home .roll { height:265px; }
  .home .roll .mini { height:111px; grid-template-columns:minmax(0,1fr) 104px; padding:8px; }
  .home .sizes button { font-size:10px; }
}
/* Region-specific examples: the neutral version unless the time zone says India (script.js sets data-region). */
html:not([data-region=IN]) .region-in,html[data-region=IN] .region-intl { display:none!important; }

/* Popular templates: a row of links to the template guides, under the template cards */
.home .tpl-popular { margin-top: 28px; padding-top: 22px; border-top: 1px solid #d9e3ec; }
.home .tpl-popular h3 { font-size: 13px; font-weight: 600; margin: 0 0 12px; color: #284a65; }
.home .tpl-popular ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home .tpl-popular a { display: inline-block; padding: 7px 13px; border: 1px solid #d4e0ea; border-radius: 20px; background: #fff; font-size: 12px; color: #1d4f7a; text-decoration: none; }
.home .tpl-popular a:hover { border-color: #1268e8; color: #1268e8; }
@media(min-width:440px) and (max-width:760px) { .home .hero-lead { margin-top:26px; } }