/* Public kit page (mock-public-kit.html, 02-design 4.5). Mobile-first; two columns from 1024 px. */
.kitpage{padding-bottom:calc(150px + env(safe-area-inset-bottom))}

/* Top bar (material) */
.bar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:10px;padding:10px var(--gutter-mobile);padding-top:max(10px,env(safe-area-inset-top));background:var(--material-thin-bg);-webkit-backdrop-filter:var(--material-blur);backdrop-filter:var(--material-blur);box-shadow:0 .5px 0 var(--border-hairline)}
.org-mark{width:32px;height:32px;flex-shrink:0;border-radius:10px;background:linear-gradient(140deg,#1D1D1F,#3A3A3C);color:#fff;display:grid;place-items:center;font:700 11px/1 var(--font-rounded);letter-spacing:.02em;box-shadow:var(--shadow-1)}
.org-logo{object-fit:contain;background:#fff;padding:3px}
.org{flex:1;min-width:0}
.org b{display:block;font-size:var(--type-subhead-size);font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org span{display:block;font-size:var(--type-caption-size);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:36px;height:36px;flex-shrink:0;border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--bg-hover);color:var(--text-primary);transition:background var(--dur-fast) var(--ease-standard)}
.icon-btn:hover{background:var(--bg-pressed)}
.lang{height:36px;min-width:44px;padding:0 12px;display:grid;place-items:center;border-radius:var(--radius-pill);background:var(--bg-hover);font-size:13px;font-weight:650}
.preview-banner{margin:10px var(--gutter-mobile) 0;padding:10px 14px;border-radius:var(--radius-md);background:var(--warning-tint);color:var(--text-warning);font-size:13.5px;font-weight:600}

/* Hero on the kit's Aurora */
.kit{max-width:var(--content-max);margin:0 auto}
.hero{position:relative;padding:28px var(--gutter-mobile) 22px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-70px -40px 0;background:var(--aurora-kit);z-index:-1;filter:blur(6px);animation:drift var(--dur-ambient) ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-14px,10px,0) scale(1.06)}}
.live{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:4px 12px 4px 10px;border-radius:var(--radius-pill);background:var(--material-regular-bg);-webkit-backdrop-filter:var(--material-blur);backdrop-filter:var(--material-blur);box-shadow:var(--material-edge),var(--shadow-1);font-size:12.5px;font-weight:600}
.live i{width:8px;height:8px;border-radius:50%;background:#2BD27E;box-shadow:0 0 0 3px rgba(43,210,126,.22);animation:pulse 2.4s var(--ease-standard) infinite}
.live .done-ico{width:16px;height:16px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--mint-700,#1F7A45);color:#fff}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(43,210,126,.22)}50%{box-shadow:0 0 0 6px rgba(43,210,126,.08)}}
.hero h1{margin-top:16px;font-family:var(--font-display);font-size:clamp(34px,10.6vw,42px);line-height:1.02;letter-spacing:-.04em;font-weight:750;text-wrap:balance}
.meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--text-secondary);font-size:14.5px;font-weight:500}
.meta span{display:inline-flex;align-items:center;gap:6px}
.eyebrow-campaign{margin-top:16px;font-size:var(--type-overline-size);letter-spacing:var(--type-overline-track);text-transform:uppercase;font-weight:650;color:var(--text-secondary)}
.eyebrow-campaign + h1{margin-top:6px}
.lede{margin-top:14px;font-size:17px;line-height:1.42;letter-spacing:-.012em;color:var(--text-primary);max-width:36ch;white-space:pre-line}
.lede em{font-style:normal;color:var(--text-secondary)}
.role{margin-top:20px;min-width:0}
.label{font-size:var(--type-overline-size);letter-spacing:var(--type-overline-track);text-transform:uppercase;font-weight:650;color:var(--text-secondary)}
.seg{margin-top:8px;display:grid;grid-template-columns:repeat(var(--n,4),auto);grid-auto-flow:row;gap:0;padding:3px;border-radius:var(--radius-md);background:rgba(29,29,31,.06);position:relative;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.seg::-webkit-scrollbar{display:none}
.seg a{position:relative;z-index:1;display:grid;place-items:center;min-height:38px;padding:2px 8px;border-radius:11px;font-size:clamp(12px,3.6vw,13.5px);white-space:nowrap;scroll-snap-align:start;font-weight:600;color:var(--text-secondary);text-align:center;line-height:1.15;transition:color var(--dur-fast) var(--ease-standard),background-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.seg a[aria-pressed="true"]{color:var(--text-primary);background:var(--bg-surface);box-shadow:0 1px 3px rgba(29,29,31,.10),0 3px 10px -2px rgba(29,29,31,.10)}

/* Kit chips */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px var(--gutter-mobile) 6px;margin-top:2px;scroll-padding-inline:var(--gutter-mobile)}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:var(--radius-pill);background:var(--bg-surface);box-shadow:var(--shadow-1);font-size:13.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-press)}
.chip:active{transform:scale(var(--press-scale))}
.chip[aria-current="page"]{background:var(--bg-inverse);color:var(--text-inverse);box-shadow:none}

/* Steps */
.step{padding:26px var(--gutter-mobile) 0}
.step-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.n{width:22px;height:22px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--bg-inverse);color:var(--text-inverse);font:700 12px/1 var(--font-rounded);transform:translateY(-2px)}
.step-h h2{font-family:var(--font-display);font-size:21px;letter-spacing:-.022em;font-weight:700;flex:1}
.step-h small{font-size:13px;color:var(--text-secondary);font-weight:500;font-variant-numeric:tabular-nums}
.empty-note{padding:16px;border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-1);color:var(--text-secondary)}

/* Visual carousel */
.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter-mobile);margin:0 calc(var(--gutter-mobile) * -1);padding:6px var(--gutter-mobile) 14px;scrollbar-width:none;align-items:flex-start}
.carousel::-webkit-scrollbar{display:none}
.vis{flex-shrink:0;scroll-snap-align:start;width:248px;position:relative}
.vis-story{width:176px}.vis-square{width:248px}.vis-landscape{width:300px}
.vis .art{display:block;width:100%;border-radius:var(--radius-lg);overflow:hidden;position:relative;background:var(--bg-sunken);box-shadow:var(--shadow-2);transition:box-shadow var(--dur-spring-snappy) var(--ease-spring-snappy),transform var(--dur-instant) var(--ease-press)}
.vis .art:active{transform:scale(.985)}
.vis .art img{width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-touch-callout:default}
.vis.sel .art{box-shadow:0 0 0 3px var(--bg-canvas),0 0 0 5.5px var(--kit-accent),var(--shadow-3)}
.vis .check{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--kit-accent);color:var(--kit-on-accent);display:grid;place-items:center;box-shadow:0 4px 12px -2px color-mix(in srgb,var(--kit-accent) 60%,transparent);opacity:0;transform:scale(.6);transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-spring-snappy) var(--ease-spring-snappy)}
.vis.sel .check{opacity:1;transform:scale(1)}
.vis figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 4px 0;font-size:13px;font-weight:600}
.vis .vl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vis .dl{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 2px;font-size:12px;font-weight:500;color:var(--text-secondary)}
.vis .dl:hover{color:var(--text-primary)}
.dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
.dots i{width:6px;height:6px;border-radius:3px;background:rgba(29,29,31,.18);transition:width var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
.dots i.on{width:18px;background:var(--text-primary)}

/* Platform grid */
.pf{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 8px}
.pf a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 0 8px;border-radius:var(--radius-md);font-size:12px;font-weight:600;color:var(--text-secondary);transition:background var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.pf .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;box-shadow:var(--shadow-1);transition:transform var(--dur-spring-snappy) var(--ease-spring-snappy)}
.pf a:active .ico{transform:scale(.94)}
.pf a[aria-pressed="true"]{background:var(--bg-surface);box-shadow:var(--shadow-2);color:var(--text-primary)}
.pf a[aria-pressed="true"] .ico{transform:scale(1.04)}
.i-linkedin{background:var(--pf-linkedin);color:var(--pf-linkedin-on)}
.i-instagram{background:var(--pf-instagram);color:var(--pf-instagram-on)}
.i-facebook{background:var(--pf-facebook);color:var(--pf-facebook-on)}
.i-x,.i-threads,.i-tiktok{background:var(--pf-x);color:var(--pf-x-on)}
.i-whatsapp{background:var(--pf-whatsapp);color:var(--pf-whatsapp-on)}
.i-email{background:var(--bg-surface);color:var(--text-primary)}
.i-sms{background:var(--pf-sms);color:var(--pf-sms-on)}

/* Caption card */
.card{background:var(--bg-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);overflow:hidden}
.cap-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 0 16px}
.cap-top b{font-size:15px;font-weight:650;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.mini{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;box-shadow:inset 0 0 0 .5px var(--border-hairline)}
.seg3{display:grid;grid-auto-flow:column;grid-auto-columns:auto;padding:2px;border-radius:10px;background:var(--bg-sunken)}
.seg3 a,.seg3 button{display:grid;place-items:center;min-height:30px;padding:0 11px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text-secondary);transition:background var(--dur-base) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.seg3 [aria-pressed="true"]{background:var(--bg-surface);color:var(--text-primary);box-shadow:0 1px 2px rgba(29,29,31,.12),0 2px 6px rgba(29,29,31,.06)}
.subject{margin:12px 16px 0;padding:8px 12px;border-radius:var(--radius-sm);background:var(--bg-surface-2);box-shadow:inset 0 0 0 1px var(--border-hairline);font-size:14px;font-weight:600}
.subject span{color:var(--text-secondary);font-weight:500;margin-right:4px}
.cap-wrap{position:relative}
.cap{padding:14px 16px 6px;font-size:15.5px;line-height:1.5;letter-spacing:-.008em;white-space:pre-wrap;overflow-wrap:anywhere;transition:opacity var(--dur-base) var(--ease-standard)}
.cap.empty{color:var(--text-secondary)}
.cap.swap{opacity:0}
.cap-after{padding-top:6px;color:var(--text-secondary)}
.cap .hook{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--sun-400) 55%,transparent) 58%);background-repeat:no-repeat;background-size:100% 100%;font-weight:600;color:var(--text-primary)}
.cap .hook.sweep{animation:sweep var(--dur-slow) var(--ease-decelerate) both}
@keyframes sweep{from{background-size:0% 100%}to{background-size:100% 100%}}
.cap .mine{color:var(--text-primary);font-weight:500;background:color-mix(in srgb,var(--kit-accent) 10%,transparent);border-radius:4px;padding:1px 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cap .tag{color:var(--text-info)}
.fold{display:flex;align-items:center;gap:8px;margin:2px 16px 0;font-size:11.5px;font-weight:600;color:var(--text-secondary)}
.fold::before,.fold::after{content:"";flex:1;border-top:1px dashed var(--border-default)}
.cap-edit{display:block;width:calc(100% - 24px);margin:12px;min-height:200px;padding:12px;border-radius:var(--radius-md);border:0;background:var(--bg-surface-2);box-shadow:inset 0 0 0 1.5px var(--kit-accent);font-size:15.5px;line-height:1.5;resize:vertical}
.cap-edit:focus{outline:none}
.cap-foot{display:flex;align-items:center;gap:8px;padding:12px 16px 14px}
.meter{display:flex;align-items:center;gap:8px;font:600 12.5px/1 var(--font-rounded);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.meter.over{color:var(--text-danger)}
.ring{width:22px;height:22px}
.ring [data-ring]{transition:stroke-dashoffset var(--dur-slow) var(--ease-standard),stroke var(--dur-fast) linear}
.spacer{flex:1}
.ghost{min-height:32px;padding:0 12px;border-radius:var(--radius-pill);background:var(--bg-sunken);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-press)}
.ghost:active{transform:scale(var(--press-scale))}
.ghost:hover{background:var(--bg-pressed)}
.well{background:var(--bg-surface-2);border-top:.5px solid var(--border-hairline);padding:14px 16px 16px}
.well .label{display:flex;justify-content:space-between;align-items:center}
.label-note{color:var(--kit-accent-ink);text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600}
.hooks{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:10px -16px 0;padding:2px 16px 4px;scroll-snap-type:x proximity}
.hooks::-webkit-scrollbar{display:none}
.hk{flex-shrink:0;scroll-snap-align:start;width:min(220px,64vw);text-align:left;padding:10px 12px;border-radius:var(--radius-md);background:var(--bg-surface);box-shadow:var(--shadow-1);font-size:13.5px;line-height:1.35;font-weight:500;transition:box-shadow var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-press)}
.hk:active{transform:scale(.98)}
.hk[disabled]{cursor:default}
.hk[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--kit-accent),var(--shadow-1);background:var(--kit-accent-tint)}
.hk small{display:block;margin-top:6px;font-size:11.5px;font-weight:650;color:var(--text-secondary)}
.hk[aria-pressed="true"] small{color:var(--kit-accent-ink)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tg{min-height:32px;padding:0 11px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-default);color:var(--text-secondary);display:inline-flex;align-items:center;gap:5px;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-press)}
.tg:active{transform:scale(var(--press-scale))}
.tg[disabled]{cursor:default}
.tg[aria-pressed="true"]{background:var(--info-tint);box-shadow:none;color:var(--text-info)}
.prompts{margin:8px -16px 0;padding:2px 16px 4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-padding-inline:16px}
.prompts::-webkit-scrollbar{display:none}
.prompts .tg{flex-shrink:0;white-space:nowrap}
.field{margin-top:10px;display:flex;align-items:flex-start;gap:8px;min-height:46px;padding:4px 6px 4px 14px;border-radius:var(--radius-md);background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-strong);transition:box-shadow var(--dur-fast) var(--ease-standard)}
.field:focus-within{box-shadow:inset 0 0 0 2px var(--kit-accent)}
.field textarea{flex:1;min-width:0;border:0;background:none;resize:none;padding:9px 0;font-size:16px;line-height:1.4;field-sizing:content;max-height:9em}
.field textarea:focus{outline:none}
.field textarea::placeholder{color:var(--text-secondary)}
.field .clear{width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;color:var(--text-secondary)}

/* Personal card teaser */
.make{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:#1D1D1F;color:#fff;padding:18px;display:grid;grid-template-columns:1fr 124px;gap:14px;align-items:center;box-shadow:var(--shadow-3);isolation:isolate}
.make::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 100% 0%,color-mix(in srgb,var(--kit-glow-1) 70%,transparent),transparent 60%),radial-gradient(60% 70% at 0% 100%,color-mix(in srgb,var(--kit-glow-3) 45%,transparent),transparent 60%);z-index:-1}
.make h3{font-family:var(--font-display);font-size:21px;line-height:1.12;letter-spacing:-.022em;font-weight:700;text-wrap:balance}
.make p{margin-top:6px;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.78)}
.make .go{margin-top:14px;min-height:40px;padding:0 16px;border-radius:var(--radius-pill);background:#fff;color:#1D1D1F;font-size:14px;font-weight:650;display:inline-flex;align-items:center;gap:6px;transition:transform var(--dur-instant) var(--ease-press)}
.make .go:active{transform:scale(var(--press-scale))}
.badge-card{aspect-ratio:4/5;border-radius:16px;background:#FFF4E6;color:#1D1D1F;padding:10px;display:flex;flex-direction:column;transform:rotate(4deg);box-shadow:0 16px 30px -10px rgba(0,0,0,.6)}
.badge-card .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--kit-glow-1),var(--kit-accent));border:2.5px solid #fff;display:grid;place-items:center;color:#fff;font:700 14px/1 var(--font-rounded);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.badge-card .s{margin-top:auto;font:800 9px/1.1 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--kit-accent-ink)}
.badge-card .nm{margin-top:4px;font:800 16px/.98 var(--font-display);letter-spacing:-.035em;overflow-wrap:anywhere}
.badge-card .ev{margin-top:5px;font-size:8.5px;font-weight:650;opacity:.7;line-height:1.25}

/* Name + link cards */
.name-card{padding:14px 16px 16px}
.name-card .input{margin-top:8px}
.hint-sm{margin-top:8px;font-size:12.5px;color:var(--text-secondary)}
.link{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 14px 14px 16px}
.link .lk{flex:1 1 100%;min-width:0}
.link .lk b{display:block;font:600 15px/1.3 var(--font-text);letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link .lk span{display:block;margin-top:2px;font-size:12.5px;color:var(--text-secondary)}
.ok{display:inline-flex;align-items:center;gap:6px;color:var(--text-success);font-weight:650;font-size:13px;flex-shrink:0}
.disclaimer{padding:14px 16px;border-radius:var(--radius-lg);background:var(--bg-surface-2);box-shadow:inset 0 0 0 1px var(--border-hairline);font-size:13.5px;color:var(--text-secondary)}
.disclaimer b{display:block;color:var(--text-primary);font-size:13px;margin-bottom:4px}
.disclaimer p{white-space:pre-line}

/* Footer */
.foot{padding:30px var(--gutter-mobile) 0;text-align:center;color:var(--text-secondary);font-size:12.5px}
.foot .tix{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:16px;border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-1);color:var(--text-primary);margin-bottom:22px;transition:box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.foot .tix:hover{box-shadow:var(--shadow-2);transform:translateY(var(--lift-y))}
.foot .tix b{display:block;font-size:15px}
.foot .tix span span{font-size:13px;color:var(--text-secondary)}
.made{display:inline-flex;align-items:center;gap:6px;font-weight:600;min-height:32px}
.made i{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#FFB53F,#FF5A36 52%,#F7357A)}
.report{margin-top:8px}
.report a{text-decoration:underline;text-underline-offset:2px}

/* Share dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:var(--material-regular-bg);-webkit-backdrop-filter:var(--material-blur-strong);backdrop-filter:var(--material-blur-strong);box-shadow:0 -.5px 0 var(--border-hairline)}
.dock .hint{display:flex;align-items:flex-start;justify-content:center;gap:6px;max-width:600px;margin:0 auto 9px;padding:0 2px;font-size:12px;line-height:16px;font-weight:500;color:var(--text-secondary);text-align:left;min-height:16px}
.dock .hint svg{margin-top:1.5px}
.dock .hint svg{flex-shrink:0}
.dock .row{display:flex;gap:8px;max-width:600px;margin:0 auto}
.primary{flex:1;min-width:0;height:54px;padding:0 18px 0 14px;border-radius:var(--radius-md);background:var(--kit-accent);color:var(--kit-on-accent);font-size:17px;font-weight:650;letter-spacing:-.015em;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:var(--shadow-glow),inset 0 1px 0 rgba(255,255,255,.18);transition:transform var(--dur-instant) var(--ease-press),background-color var(--dur-base) var(--ease-standard)}
.primary:active{transform:scale(var(--press-scale))}
.primary > span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.primary[aria-disabled="true"]{opacity:.5;pointer-events:none}
.primary .gl{width:24px;height:24px;flex-shrink:0;border-radius:7px;background:#fff!important;display:grid;place-items:center}
.primary .gl.i-linkedin{color:var(--pf-linkedin)}.primary .gl.i-facebook{color:var(--pf-facebook)}.primary .gl.i-instagram{color:#D62976}.primary .gl.i-whatsapp{color:#128C4A}.primary .gl.i-sms{color:#1F7A45}
.primary .gl.i-x,.primary .gl.i-threads,.primary .gl.i-tiktok,.primary .gl.i-email{color:#000}
.primary.shared{background:var(--mint-700);color:#fff;animation:pop var(--dur-spring-bouncy) var(--ease-spring-bouncy)}
@keyframes pop{from{transform:scale(.94)}to{transform:scale(1)}}
.sq{width:54px;height:54px;flex-shrink:0;border-radius:var(--radius-md);background:var(--bg-surface);box-shadow:var(--shadow-1);display:grid;place-items:center;color:var(--text-primary);transition:transform var(--dur-instant) var(--ease-press)}
.sq:active{transform:scale(var(--press-scale))}
.sq.done{color:var(--text-success)}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(var(--dock-h,calc(108px + env(safe-area-inset-bottom))) + 12px);z-index:var(--z-toast);width:max-content;max-width:min(88vw,360px);padding:11px 16px;border-radius:var(--radius-pill);background:rgba(29,29,31,.94);color:var(--text-inverse);font-size:14px;font-weight:600;box-shadow:var(--shadow-3);opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity var(--dur-base) var(--ease-decelerate),transform var(--dur-base) var(--ease-decelerate);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.sparkle{position:fixed;width:8px;height:8px;border-radius:50%;z-index:var(--z-toast);pointer-events:none;animation:burst 700ms var(--ease-decelerate) forwards}
@keyframes burst{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}

/* Copy fallback sheet + card sheet (dialog) */
.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:94vh;border:0;padding:0;background:transparent;color:inherit;overflow:visible}
.sheet::backdrop{background:rgba(20,16,12,.42);animation:fade var(--dur-base) var(--ease-standard)}
.sheet[open] .sheet-in{animation:sheetUp var(--dur-spring-gentle) var(--ease-spring-gentle)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-in{background:var(--bg-canvas);overflow-x:hidden;border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-height:94vh;overflow-y:auto;padding:12px var(--gutter-mobile) calc(16px + env(safe-area-inset-bottom));box-shadow:var(--shadow-4)}
.grabber{display:block;width:36px;height:5px;margin:0 auto 4px;border-radius:3px;background:var(--border-strong)}
.sheet-top{display:flex;align-items:center;justify-content:space-between;padding:4px 0 10px}
.sheet-top h2{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.02em}
.card-stage{padding:6px 0 12px;min-width:0}
.card-stage canvas{display:block;margin:0 auto;width:auto;height:min(48vh,calc((100vw - 32px) * 1.25));max-width:100%;object-fit:contain;aspect-ratio:var(--ar,4/5);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);background:var(--bg-sunken)}
.card-stage canvas.landed{animation:land var(--dur-spring-bouncy) var(--ease-spring-bouncy)}
@keyframes land{from{transform:scale(.92) rotate(-1.5deg)}to{transform:none}}
.card-layouts{width:max-content;max-width:100%;margin:0 auto 12px;overflow-x:auto}
.card-form{display:grid;gap:10px}
.fld{display:grid;gap:4px}
.fld > span{font-size:12.5px;font-weight:600;color:var(--text-secondary)}
.photo-pick{display:block;cursor:pointer}
.photo-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap-min);border-radius:var(--radius-md);background:var(--bg-surface);box-shadow:var(--shadow-1);font-weight:650;font-size:15px}
.photo-pick:focus-within .photo-btn{box-shadow:var(--focus-ring)}
.zoom{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--text-secondary)}
.zoom input{flex:1;accent-color:var(--kit-accent);min-height:32px}
.privacy{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.sheet-actions{display:flex;gap:8px;margin:14px calc(var(--gutter-mobile) * -1) 0;padding:10px var(--gutter-mobile) 0;position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom));padding-bottom:calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--bg-canvas) 14px)}
.textsheet textarea{width:100%;min-height:40vh;padding:12px;border-radius:var(--radius-md);border:0;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-strong);font-size:16px;line-height:1.45}

/* Tablet: centred column */
@media (min-width:640px){
  .kit{max-width:620px}
  .hero{padding-top:40px}
  .sheet{inset:0;margin:auto;max-width:460px;height:fit-content}
  .sheet-in{border-radius:var(--radius-xl)}
  .grabber{display:none}
}

/* Small phones (320 px): icon-only secondary buttons, tighter dock */
@media (max-width:360px){
  .dock{padding-inline:10px}
  .dock .row{gap:6px}
  .sq{width:46px}
  .primary{font-size:16px;padding:0 14px 0 12px;gap:8px}
  .hero h1{font-size:32px}
  .seg a{padding:2px 5px}
}

/* Desktop: visual sticky on the left, steps on the right, floating dock aligned with the right column */
@media (min-width:1024px){
  .kitpage{padding-bottom:60px}
  .kit{max-width:var(--content-max);padding:0 var(--gutter-desktop)}
  .bar{padding-inline:max(var(--gutter-desktop),calc((100vw - var(--content-max)) / 2 + var(--gutter-desktop)))}
  .hero{padding:56px 0 28px;max-width:720px}
  .hero h1{font-size:var(--type-display-size)}
  body.kitpage{isolation:isolate}
  .hero::before{display:none}
  .kitpage::before{content:"";position:absolute;inset:0 0 auto;height:860px;background:var(--aurora-kit);-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent);z-index:-1;pointer-events:none}
  .chips{padding-inline:0;flex-wrap:wrap;overflow:visible}
  .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:start}
  .col-visual{position:sticky;top:76px}
  .col-visual .step{padding-inline:0}
  /* One row of visuals (peek scroll) sized to the viewport height, so the sticky column always fits: visuals + the dock. */
  .col-visual .carousel{flex-wrap:nowrap;overflow-x:auto;margin:-8px -24px -12px;padding:14px 24px 24px;scroll-padding-inline:24px;gap:18px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  .col-visual .carousel::-webkit-scrollbar{display:none}
  .col-visual .vis{width:min(272px,calc(45% - 9px),calc((100vh - 420px) * .8))}
  .col-visual .vis-story{width:min(200px,calc(34% - 9px),calc((100vh - 420px) * .5625))}
  .col-visual .vis-landscape{width:min(100%,calc((100vh - 420px) * 1.91))}
  .role{max-width:560px}
  .dots{display:none}
  .col-steps .step{padding-inline:0}
  .col-steps{padding-bottom:0}
  .card{scroll-margin-bottom:140px}
  .foot{padding-inline:0}
  /* The dock sits under the visuals in the sticky left column: always in reach, never over the caption. */
  .dock{position:static;margin-top:18px;border-radius:var(--radius-xl);background:var(--bg-surface);box-shadow:var(--shadow-2);padding:14px}
  .dock .hint{justify-content:flex-start}
  .dock .row{max-width:none}
  .toast{bottom:32px}
  .vis .art:hover{transform:translateY(var(--lift-y))}
  .pf a:hover{background:var(--bg-hover)}
  .pf a[aria-pressed="true"]:hover{background:var(--bg-surface)}
}

@media (prefers-reduced-motion: reduce){
  .hero::before,.live i{animation:none}
  .sparkle{display:none}
  .sheet[open] .sheet-in{animation:fade var(--dur-base) linear}
  .card-stage canvas.landed,.primary.shared{animation:none}
}
@media (prefers-reduced-transparency: reduce){.bar,.dock,.live{-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (forced-colors: active){.vis.sel .art{outline:3px solid Highlight}.seg a[aria-pressed="true"],.seg3 [aria-pressed="true"],.pf a[aria-pressed="true"],.tg[aria-pressed="true"],.hk[aria-pressed="true"]{outline:2px solid Highlight}}
@media print{.bar,.dock,.toast,.sheet{display:none!important}}