:root{--concept-bg:#f3eee6;--concept-surface:#fffdf9;--concept-ink:#111315;--concept-muted:#687176;--concept-line:#ded5c9;--concept-brand:#0c596c;--concept-brand-dark:#063946;--concept-leather:#a95f2d;--concept-radius:26px;--concept-shadow:0 22px 60px rgba(38,29,21,.1);--concept-section-pad:clamp(4rem,8vw,7rem)}/* The negative scroll-margin cancels the section's own top padding, so an anchor lands on the heading instead of the empty space above it. Positive scroll-padding-top on still clears the sticky header. */.concept-section{padding:var(--concept-section-pad) 0;scroll-margin-top:calc(-1 * var(--concept-section-pad))}.concept-card{background:rgba(255,253,249,.94);border:1px solid rgba(117,94,72,.12);border-radius:var(--concept-radius);box-shadow:var(--concept-shadow)}.concept-eyebrow{display:inline-flex;width:max-content;padding:.42rem .65rem;border:1px solid #c7d4d8;border-radius:999px;color:var(--concept-brand);font-size:.67rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:#ffffffad}.concept-heading{display:grid;gap:1rem;margin-bottom:2rem;max-width:760px}.concept-heading h2,.dashboard h2,.equation-card h2,.config-teaser h2,.final-cta h2,.solution-page h1{font-size:clamp(2.2rem,7vw,4rem);letter-spacing:-.035em}.concept-heading p,.dashboard p,.config-teaser p,.equation-card p,.final-cta p{color:var(--concept-muted);max-width:60ch}.concept-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.15rem;border-radius:13px;border:1px solid transparent;font-weight:700}.concept-btn--primary{background:var(--concept-brand);color:white;box-shadow:0 10px 28px rgba(12,89,108,.2)}.concept-btn--secondary{border-color:#8da9b0;color:var(--concept-brand)}.concept-btn--white{background:white;color:var(--concept-brand)}.concept-btn--outline{border-color:#ffffff70;color:white}.concept-actions{display:flex;flex-wrap:wrap;gap:.65rem}.concept-hero{padding:clamp(2.5rem,7vw,6.5rem) 0;background:radial-gradient(circle at 85% 0%,rgba(176,111,65,.14),transparent 28rem),var(--concept-bg)}.concept-hero__grid{display:grid;gap:2.3rem}.concept-hero__copy{display:grid;align-content:center;gap:1.15rem}.concept-hero__copy h1{font-size:clamp(3.3rem,10vw,6.5rem);letter-spacing:-.055em;max-width:9ch}.concept-hero__copy>p{font-size:1.05rem;color:var(--concept-muted);max-width:42rem}.concept-hero__copy>small{color:#516167;font-weight:600}.concept-hero__visual{min-height:430px;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:32px;background:radial-gradient(circle at 50% 46%,#fff,#e9ddcd 58%,transparent 78%)}.concept-hero__product{display:block;width:100%;height:100%;min-height:430px;object-fit:cover;object-position:center}.smart-tag{width:min(62vw,250px);aspect-ratio:1;position:relative;display:grid;place-items:center;border:2px dashed #3a1d0ebe;border-radius:27px;background:linear-gradient(145deg,#b56b36,#6c3518);box-shadow:0 30px 52px #4d2a144d;color:#2c160a;font:700 1.35rem var(--serif);transition:background .3s,border-radius .3s,transform .3s}/* With real art the tile stops being a placeholder: the dashed "nothing here yet" border goes solid, the leather gradient becomes a neutral ground behind a transparent PNG, and the word is dropped because the active chip already says which product this is. border-radius stays inherited so the round Tag shape the script sets on the tile still clips the image. */ .smart-tag--art{place-items:stretch;padding:0;overflow:hidden;border-style:solid;border-color:#3a1d0e1f;background:var(--paper-deep)} .smart-tag--art b{display:none} .smart-tag__art{width:100%;height:100%;object-fit:cover;border-radius:inherit} .smart-tag--hero{transform:rotate(7deg);z-index:3}.smart-tag--hero i{position:absolute;top:16px;left:16px;width:24px;height:24px;border-radius:50%;background:#efe2d5;box-shadow:inset 0 0 0 5px #643719}.smart-tag--hero b{display:block;text-align:center}.smart-tag__qr{display:block;width:94px;height:94px;margin:.7rem auto 0;background:repeating-conic-gradient(#1d0e07 0 25%,transparent 0 50%) 50%/22px 22px}.story{background:#10181d;color:white}.concept-heading--dark .concept-eyebrow{color:#bfe1e8;border-color:#32515c;background:#ffffff0a}.concept-heading--dark p,.story p{color:#aebcc1}.story__grid{display:grid;gap:1.25rem}.story__sticky{position:sticky;top:90px;height:52vh;min-height:350px;border-radius:30px;display:grid;place-items:center;background:radial-gradient(circle,#ffffff1c,transparent 50%),#142129;overflow:hidden}.story__sticky>span{position:absolute;bottom:20px;padding:.5rem .75rem;border:1px solid #ffffff1f;border-radius:999px;background:#ffffff12;font-size:.75rem}.story__steps{display:grid;gap:.9rem}.story__step{min-height:220px;padding:1.4rem;user-select:none;-webkit-user-select:none;cursor:default;border:1px solid #ffffff17;border-radius:22px;background:#ffffff0a;display:grid;align-content:center;gap:.65rem;opacity:.45;transition:.25s}.story__step.is-active{opacity:1;background:#ffffff13}.story__step h3{font-size:1.6rem}.solution-icon{width:2.2rem;height:2.2rem;display:grid;place-items:center;border:1px solid #b8cbd0;border-radius:50%;color:var(--concept-brand);font-weight:800}.solution-icon:before{font-family:var(--sans)}.solution-icon--person:before{content:"P"}.solution-icon--paw:before{content:"Pet";font-size:.65rem}.solution-icon--briefcase:before{content:"B"}.solution-icon--rings:before{content:"W"}.solution-icon--diamond:before{content:"J"}.solution-icon--plus:before{content:"+"}.solution-icon--customize:before{content:"✦"}.solution-icon--links:before{content:"↗"}.solution-icon--vcard:before{content:"ID";font-size:.62rem}.solution-icon--lost:before{content:"⌖"}.solution-icon--sos:before{content:"SOS";font-size:.55rem}.solution-icon--tourism:before{content:"T"}.dashboard{padding:clamp(1.5rem,5vw,3rem);display:grid;gap:2rem}.dashboard__copy{display:grid;align-content:center;gap:1rem}.feature-pills{display:flex;flex-wrap:wrap;gap:.45rem}.feature-pills span{padding:.5rem .65rem;border:1px solid #e3dbd0;border-radius:999px;background:white;font-size:.75rem;font-weight:650}.dash-window{padding:.75rem;border-radius:24px;background:#0b171d;box-shadow:0 30px 62px #08131842}.dash-window__bar{display:flex;gap:.35rem;padding:.1rem 0 .65rem}.dash-window__bar i{width:8px;height:8px;border-radius:50%;background:#6f7b80}.dash-window__body{padding:.8rem;border-radius:16px;background:#f8fafb}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.metrics div,.dash-list{padding:.8rem;border:1px solid #e5ecef;border-radius:13px;background:white}.metrics small,.dash-list small{display:block;color:#718087}.metrics b{font-size:1.45rem}.dash-list{margin-top:.65rem}.dash-list>div{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:.55rem;padding:.55rem 0;border-bottom:1px solid #edf1f2}.dash-list>div:last-child{border:0}.dash-list>div>i{width:34px;height:34px;border-radius:9px;background:linear-gradient(145deg,#b76a32,#743718)}.dash-list em{padding:.3rem .4rem;border-radius:999px;background:#e9f4ee;color:#1f714f;font-size:.6rem;font-style:normal;font-weight:800;text-transform:uppercase}.solution-grid{display:grid;gap:.9rem}.solution-card{min-height:190px;padding:1.35rem;display:grid;align-content:start;gap:.7rem;overflow:hidden;position:relative}.solution-card h3{font-size:1.5rem}.solution-card p{color:var(--concept-muted)}.solution-card a{color:var(--concept-brand);font-weight:750;font-size:.85rem}.equation-card{padding:clamp(1.5rem,5vw,3rem);text-align:center}.equation-card>.concept-eyebrow{margin:auto}.equation-card h2{margin:1rem 0 2rem}.equation{display:grid;align-items:center;gap:.75rem}.equation>div{padding:1.1rem;border:1px solid #e5ddd2;border-radius:18px;background:white}.equation b{font-size:1.15rem}.equation__result{background:var(--concept-brand)!important;color:white}.equation__result p{color:#ffffffbf}.config-teaser{padding:clamp(1.5rem,5vw,2.5rem);display:grid;gap:2rem}.config-teaser__preview{min-height:350px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#f1e7d9,#fbfaf7)}.config-teaser__copy{display:grid;align-content:center;gap:1rem}.product-chips{display:grid;gap:.6rem}.product-chips button{padding:.65rem;border:1px solid var(--concept-line);border-radius:14px;background:white;display:grid;grid-template-columns:48px 1fr;gap:.75rem;text-align:left;align-items:center;cursor:pointer}.product-chips button.is-active{border-color:var(--concept-brand);box-shadow:inset 0 0 0 1px var(--concept-brand)}.product-chips img{width:48px;height:48px;border-radius:9px;object-fit:cover}.product-chips small{display:block;color:var(--concept-muted)}.plan-grid{display:grid;gap:1rem}.plan-card{padding:1.5rem;display:grid;gap:1rem}.plan-card header{display:flex;justify-content:space-between;align-items:end}.plan-card header b{font:600 2rem var(--serif)}.plan-card header span,.plan-card p{color:var(--concept-muted)}.plan-card ul{list-style:none;padding:0;margin:0}.plan-card li{padding:.55rem 0;border-bottom:1px solid var(--concept-line)}.plan-card li:before{content:"✓";color:var(--concept-brand);margin-inline-end:.5rem}.plan-card--pro{border:1px solid var(--concept-brand);position:relative}.plan-card--pro>em{position:absolute;top:1rem;right:1rem;padding:.35rem .5rem;border-radius:999px;background:var(--concept-brand);color:white;font-size:.65rem;font-style:normal}.final-cta{padding:clamp(2rem,6vw,4rem);border-radius:var(--concept-radius);background:linear-gradient(135deg,var(--concept-brand),var(--concept-brand-dark));color:white;display:grid;gap:1rem}.final-cta .concept-eyebrow{color:white;border-color:#ffffff4d;background:#ffffff12}.final-cta p{color:#ffffffc7}.concept-section--last{padding-top:1rem;scroll-margin-top:-1rem}.solution-page{width:min(calc(100% - var(--page-gutter) * 2),900px);margin:auto;padding:clamp(4rem,9vw,8rem) 0}.solution-page__hero{display:grid;gap:1.2rem}.solution-page__hero>p{font-size:1.15rem;color:var(--concept-muted);max-width:58ch}.solution-page__uses{display:grid;gap:1rem;margin-top:3rem}.solution-page__uses article{padding:1.5rem}.solution-page__uses h2{font-size:1.8rem;margin-bottom:.6rem}.solution-page__uses p{color:var(--concept-muted)} @media(min-width:760px){.concept-hero__grid,.dashboard,.config-teaser{grid-template-columns:.9fr 1.1fr;align-items:center}.story__grid{grid-template-columns:1fr 1fr}.solution-grid{grid-template-columns:repeat(2,1fr)}.equation{grid-template-columns:1fr auto 1fr auto 1fr}.plan-grid{grid-template-columns:1fr 1fr}.solution-page__uses{grid-template-columns:repeat(2,1fr)}} @media(min-width:1020px){.solution-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:900px){.site-header__actions>a:not(.header-create):not(.header-basket){display:none}.header-create{min-height:38px;padding:0 .7rem;font-size:.72rem}} @media(min-width:641px){.account-menu__toggle{width:44px;height:44px}}.account-menu [data-auth-panel],.menu-overlay__account [data-auth-panel]{display:none!important}.account-menu[data-auth-state=loading] [data-auth-panel=loading],.menu-overlay__account[data-auth-state=loading] [data-auth-panel=loading],.account-menu[data-auth-state=error] [data-auth-panel=error],.menu-overlay__account[data-auth-state=error] [data-auth-panel=error],.account-menu[data-auth-state=guest] [data-auth-panel=guest],.menu-overlay__account[data-auth-state=guest] [data-auth-panel=guest],.account-menu[data-auth-state=authenticated] [data-auth-panel=authenticated],.menu-overlay__account[data-auth-state=authenticated] [data-auth-panel=authenticated]{display:grid!important}.account-menu__dropdown [data-auth-panel=loading]{padding:.65rem .7rem;color:var(--soft);font-size:.78rem;white-space:nowrap}.account-menu__dropdown [data-auth-panel=error]{padding:.25rem}.account-menu__dropdown [data-auth-panel=error] p{margin:.35rem .45rem;color:var(--soft);font-size:.78rem;line-height:1.4}.account-menu__identity{min-width:0;padding:.55rem .7rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.65rem}.account-menu__identity-initial{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:grid!important;place-items:center;background:#e6f0f2;color:var(--concept-brand);font-size:.78rem;font-weight:800}.account-menu__identity-copy{min-width:0}.account-menu__identity strong,.account-menu__identity-copy>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-menu__identity strong{font-size:.82rem}.account-menu__identity-copy>span{margin-top:.1rem;color:var(--soft);font-size:.72rem}.menu-overlay__account .account-menu__identity{padding:.25rem 0 .65rem}.menu-overlay__account [data-auth-panel=error] p{margin:0 0 .35rem;color:var(--soft);font-size:.78rem} .menu-overlay__account [data-auth-logout]{margin-top:.35rem;padding-top:.55rem;border-top:1px solid var(--line)} .site-header__actions>a[href*="/digital-pages/"]{display:none} .products__grid--all .product-card{display:flex;flex-direction:column}.products__grid--all .product-card__info{flex:1;grid-template-rows:auto 1fr auto}.products__grid--all .product-card__actions{align-self:end;width:100%}.products__grid--all .product-card__customize{width:100%;min-height:42px;margin-top:.25rem;border:0;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--concept-brand);color:white;font-size:.78rem;font-weight:750}.products__grid--all .product-card__customize:hover{background:var(--concept-brand-dark)}.products__grid--all .product-card__customize:focus-visible,.products__grid--all .product-card__example:focus-visible{outline:3px solid color-mix(in srgb,var(--concept-brand) 45%,transparent);outline-offset:2px} @media(max-width:640px){.concept-actions{display:grid}.concept-hero__visual{min-height:390px}.use-chip--personal{display:none}.story__sticky{position:sticky;top:72px;z-index:5;height:min(42vh,360px);min-height:260px}.dash-list em{display:none}} @media(prefers-reduced-motion:no-preference){.smart-tag--hero{animation:concept-float 5s ease-in-out infinite}@keyframes concept-float{50%{transform:rotate(4deg) translateY(-10px)}}} /* Four sections hang .concept-wrap on the card itself (dashboard, equation, config teaser, final CTA) instead of nesting one inside the other. For those the shell inset has to be margin, not padding, or the card background, border and 26px radius run flush to the viewport edge. Same gutter, same alignment; each card keeps its own inner padding. */ .concept-wrap.concept-card,.concept-wrap.final-cta{width:auto;margin-inline:var(--page-gutter)}