/* ══════════════════════════════════════════════════════
   KETAKET — ПУБЛИЧЕН САЙТ  ·  Дизайн система „Перла"
══════════════════════════════════════════════════════ */
:root {
  --p4:#7A2882; --p3:#9B35A4; --p2:#C770D0; --p1:#E8C5ED; --p0:#F5EAF8;
  --s3:#2A9494; --s2:#3ABFBF; --s1:#8EDDDD;
  --a3:#A07B14; --a2:#C49A1A; --a1:#E8C04D;
  --bg:#FAFAFE; --bg2:#F2EEF9; --surface:#FFFFFF;
  --card:linear-gradient(148deg,#FFFFFF 0%,#F8F2FC 100%);
  --border:#E4D8EE; --border2:#F0EAF8;
  --text:#2D1A36; --text2:#5C4870; --textm:#9480A8;
  --body-bg:
    radial-gradient(ellipse 80% 50% at 5% 0%, rgba(155,53,164,.07) 0%, transparent 100%),
    radial-gradient(ellipse 65% 45% at 97% 95%, rgba(58,191,191,.05) 0%, transparent 100%),
    radial-gradient(ellipse 45% 40% at 50% 50%, rgba(196,154,26,.03) 0%, transparent 100%),
    #FAFAFE;
  --pg-btn:linear-gradient(135deg,#C770D0 0%,#9B35A4 55%,#6A2072 100%);
  --pg-hero:linear-gradient(160deg,#F5EAF8 0%,#FAFAFE 50%,#EDF8F8 100%);
  --sh-sm:0 2px 8px rgba(155,53,164,.08); --sh-md:0 6px 24px rgba(155,53,164,.12);
  --sh-lg:0 14px 48px rgba(155,53,164,.18); --sh-brand:0 6px 28px rgba(155,53,164,.28);
  --fh:'Cormorant Garamond',Georgia,serif; --fb:'Raleway','Helvetica Neue',Arial,sans-serif;
  --h1:clamp(2rem,5.5vw,3.5rem); --h2:clamp(1.5rem,4vw,2.25rem); --h3:clamp(1.2rem,3vw,1.6rem);
  --r-sm:.5rem; --r-md:.875rem; --r-lg:1.375rem; --r-xl:2.25rem; --r-full:9999px;
  --ease:cubic-bezier(.25,.46,.45,.94); --dt:.25s;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fb);font-size:1rem;line-height:1.65;color:var(--text);background:var(--body-bg);min-height:100vh}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
input,select,textarea,button{font-family:inherit;font-size:1rem}
.hidden{display:none!important}
.shell{width:min(90%,1320px);max-width:1320px;margin:0 auto;padding:0}
.shell.narrow{width:min(90%,900px);max-width:900px}

/* ── БУТОНИ ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;border-radius:var(--r-full);font-weight:600;font-size:.92rem;border:none;cursor:pointer;transition:all var(--dt) var(--ease)}
.btn-primary{background:var(--pg-btn);color:#fff;box-shadow:var(--sh-brand)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.btn-secondary{background:var(--surface);color:var(--p3);border:2px solid var(--p2)}
.btn-secondary:hover{background:var(--p0)}
.btn-ghost{background:transparent;color:var(--p3);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--p2);background:var(--p0)}
.btn-lg{padding:.95rem 2.2rem;font-size:1.02rem}
.btn-sm{padding:.45rem 1rem;font-size:.82rem}

/* ── HEADER ── */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,250,254,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border2)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:.85rem;padding-bottom:.85rem}
.logo{font-family:var(--fh);font-size:1.7rem;font-weight:700;font-style:italic;color:var(--p3)}
.logo span{color:var(--text)}
.main-nav{display:flex;align-items:center;gap:1.6rem;font-size:.9rem;font-weight:500;color:var(--text2)}
.main-nav a:hover,.main-nav a.active{color:var(--p3)}
.main-nav .nav-cta{color:#fff}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;color:var(--p3);cursor:pointer}

/* ── HERO ── */
.hero{background:var(--pg-hero);padding:4.5rem 0;border-bottom:1px solid var(--border2)}
.hero.small{padding:3.5rem 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--a2);margin-bottom:1rem}
.hero h1{font-family:var(--fh);font-size:var(--h1);font-weight:700;line-height:1.12;margin-bottom:1.2rem}
.hero p{color:var(--text2);font-size:1.06rem;line-height:1.8;margin-bottom:1.8rem;max-width:34rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero-visual img{border-radius:var(--r-xl);box-shadow:var(--sh-lg)}
.bead-arc{display:flex;gap:.9rem;justify-content:center;align-items:flex-end;padding:2rem 0}
.bead-arc span{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),transparent 42%),var(--b);box-shadow:0 10px 24px rgba(45,26,54,.22);animation:beadfloat 4s var(--ease) infinite}
.bead-arc span:nth-child(2n){animation-delay:.6s;width:44px;height:44px}
.bead-arc span:nth-child(3n){animation-delay:1.2s;width:60px;height:60px}
@keyframes beadfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.bead-arc span{animation:none}}

/* ── TRUST BAR ── */
.trust-bar{background:var(--surface);border-bottom:1px solid var(--border2);padding:.9rem 0}
.trust-items{display:flex;justify-content:center;gap:2.2rem;flex-wrap:wrap;font-size:.82rem;font-weight:600;color:var(--text2)}

/* ── СЕКЦИИ ── */
.section{padding:4.5rem 0}
.section-alt{background:var(--bg2)}
.page-title{font-family:var(--fh);font-size:var(--h1);font-weight:700;margin-bottom:1rem}
.section-title{font-family:var(--fh);font-size:var(--h2);font-weight:600;margin-bottom:.8rem;text-align:center}
.section-sub{color:var(--text2);text-align:center;max-width:38rem;margin:0 auto 2.5rem;line-height:1.8}
.section .page-title + .section-sub, .content-block .section-sub{text-align:left;margin-left:0}
.section-more{text-align:center;margin-top:2.5rem}

/* ── ПОВОДИ ── */
.occasion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem}
.occasion-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.8rem 1.5rem;transition:all var(--dt) var(--ease);display:block;position:relative}
.occasion-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--p2)}
.occasion-icon{font-size:1.6rem;color:var(--p3);margin-bottom:.8rem}
.occasion-card h3{font-family:var(--fh);font-size:1.3rem;font-weight:600;margin-bottom:.5rem}
.occasion-card p{font-size:.86rem;color:var(--text2);line-height:1.6}
.occasion-link{display:inline-block;margin-top:.9rem;font-size:.82rem;font-weight:700;color:var(--p3)}
.occasion-card.selectable{cursor:pointer}
.occasion-card.selectable input{position:absolute;opacity:0}
.occasion-card.selectable:has(input:checked){border-color:var(--p3);box-shadow:var(--sh-brand);background:var(--p0)}

/* ── FEATURES ── */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.feature-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);padding:1.6rem;box-shadow:var(--sh-sm)}
.feature-card h3{font-family:var(--fh);font-size:1.25rem;font-weight:600;margin-bottom:.5rem;color:var(--p4)}
.feature-card p{font-size:.88rem;color:var(--text2);line-height:1.7}

/* ── ПРИМЕРИ ── */
.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem}
.example-grid.large{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.example-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:all var(--dt) var(--ease)}
.example-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.example-img{aspect-ratio:1/1;background:var(--p0)}
.example-img img{width:100%;height:100%;object-fit:cover}
.example-ph{display:flex;align-items:center;justify-content:center;height:100%;font-size:2.5rem;color:var(--p2)}
.example-body{padding:1.1rem 1.2rem 1.3rem}
.example-body h3{font-family:var(--fh);font-size:1.2rem;font-weight:600;margin-bottom:.3rem}
.example-stones,.example-meta{font-size:.8rem;color:var(--textm);margin-bottom:.6rem}
.style-filter{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-bottom:2.2rem}
.pill{display:inline-block;padding:.4rem 1.1rem;border-radius:var(--r-full);border:1.5px solid var(--border);font-size:.82rem;font-weight:600;color:var(--text2);transition:all var(--dt)}
.pill:hover{border-color:var(--p2);color:var(--p3)}
.pill.active{background:var(--pg-btn);color:#fff;border-color:transparent}
.pill-sm{padding:.2rem .7rem;font-size:.72rem;margin-right:.5rem}

/* ── ПРОЦЕС ── */
.process-steps{list-style:none;display:flex;flex-direction:column;gap:1.2rem;margin:2rem 0}
.process-step{display:flex;gap:1.2rem;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);padding:1.3rem 1.5rem;box-shadow:var(--sh-sm)}
.step-num{flex:0 0 2.4rem;height:2.4rem;border-radius:50%;background:var(--pg-btn);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.process-step h3{font-family:var(--fh);font-size:1.2rem;font-weight:600;margin-bottom:.25rem}
.process-step p{font-size:.88rem;color:var(--text2)}

/* ── СЪДЪРЖАНИЕ ── */
.content-block{max-width:760px}
.content-block h2{font-family:var(--fh);font-size:var(--h2);font-weight:600;margin:2rem 0 1rem}
.content-img{border-radius:var(--r-lg);box-shadow:var(--sh-md);margin:1.5rem 0}
.rich p{margin-bottom:1rem;color:var(--text2);line-height:1.85}
.rich strong{color:var(--text)}
.rich ul,.rich ol{margin:0 0 1rem 1.4rem;color:var(--text2)}
.rich h2,.rich h3{font-family:var(--fh);font-weight:600;margin:1.6rem 0 .7rem;color:var(--text)}
.preparation{background:var(--p0);border-left:3px solid var(--p3);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:1.6rem 1.8rem;margin-top:2.5rem}
.faq-cat{font-family:var(--fh);font-size:1.4rem;font-weight:600;color:var(--p4);margin:2rem 0 .8rem}

/* ── АКОРДЕОН ── */
.accordion{display:flex;flex-direction:column;gap:.7rem}
.acc-item{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.acc-item summary{padding:1rem 1.3rem;font-weight:600;cursor:pointer;list-style:none;position:relative}
.acc-item summary::after{content:'+';position:absolute;right:1.3rem;color:var(--p3);font-size:1.2rem}
.acc-item[open] summary::after{content:'−'}
.acc-item p{padding:0 1.3rem 1.1rem;color:var(--text2);font-size:.92rem;line-height:1.75}

/* ── ФОРМИ / ФУНИЯ ── */
.form-field{margin-bottom:1.2rem}
.form-field label{display:block;font-size:.82rem;font-weight:700;color:var(--text2);margin-bottom:.4rem}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:.75rem 1rem;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);transition:border-color var(--dt)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--p3);box-shadow:0 0 0 3px rgba(155,53,164,.12)}
.form-field small{display:block;margin-top:.35rem;font-size:.78rem}
.form-field small a{color:var(--p3);font-weight:600}
.form-row,.form-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.field-full{grid-column:1/-1}
.form-note{font-size:.8rem;color:var(--textm);margin-bottom:.6rem;line-height:1.7}
.form-note a{color:var(--p3);font-weight:600}
.form-note.disclaimer{background:var(--p0);border-left:3px solid var(--p3);padding:.7rem 1rem;border-radius:0 var(--r-sm) var(--r-sm) 0}
.form-error{background:#FDECEF;border-left:3px solid #C93756;color:#8E2340;padding:.8rem 1.1rem;border-radius:0 var(--r-sm) var(--r-sm) 0;margin-bottom:1.4rem;font-size:.9rem}
.funnel-step{margin-bottom:2rem}
.step-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--a2);margin-bottom:1.2rem}
.funnel-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border2)}
.funnel-nav .btn:only-child{margin-left:auto}
.occ-fields{display:none}
.occ-fields.show{display:block}
.success-box{text-align:center;padding:3rem 1rem}
.success-icon{width:4.5rem;height:4.5rem;margin:0 auto 1.5rem;border-radius:50%;background:var(--pg-btn);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:var(--sh-brand)}
.success-box h1{font-family:var(--fh);font-size:var(--h2);margin-bottom:.8rem}
.success-box p{color:var(--text2);max-width:32rem;margin:0 auto 2rem;line-height:1.8}

/* ── БЛОГ ── */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.post-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:all var(--dt) var(--ease);display:block}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.post-cover{aspect-ratio:16/9;background:var(--p0)}
.post-cover img{width:100%;height:100%;object-fit:cover}
.post-body{padding:1.2rem 1.4rem 1.5rem}
.post-date{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--a2);margin-bottom:.4rem}
.post-card h3{font-family:var(--fh);font-size:1.3rem;font-weight:600;margin-bottom:.4rem}
.post-card p{font-size:.86rem;color:var(--text2)}

/* ── ИСТОРИЯ / CTA ── */
.history-teaser{text-align:center;max-width:640px}
.history-teaser p{color:var(--text2);line-height:1.85;margin-bottom:1.6rem}
.final-cta{background:linear-gradient(135deg,var(--p4) 0%,var(--p3) 60%,#7A2882 100%);color:#fff;text-align:center;padding:4.5rem 0}
.final-cta h2{font-family:var(--fh);font-size:var(--h2);font-weight:600;margin-bottom:.7rem}
.final-cta p{opacity:.85;margin-bottom:1.8rem}
.final-cta .btn-primary{background:#fff;color:var(--p4);box-shadow:0 8px 30px rgba(0,0,0,.25)}

/* ── FOOTER ── */
.site-footer{background:var(--surface);border-top:1px solid var(--border);padding:3.5rem 0 1.5rem;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.5rem}
.footer-logo{font-size:1.4rem;margin-bottom:.7rem}
.footer-about{font-size:.84rem;color:var(--text2);line-height:1.7;max-width:18rem;margin-bottom:1rem}
.footer-social{display:flex;gap:1rem;font-size:.84rem;font-weight:600}
.footer-social a{color:var(--p3)}
.footer-title{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--textm);margin-bottom:.8rem}
.footer-grid a{display:block;font-size:.86rem;color:var(--text2);margin-bottom:.5rem}
.footer-grid a:hover{color:var(--p3)}
.footer-bottom{border-top:1px solid var(--border2);padding-top:1.4rem;font-size:.78rem;color:var(--textm)}
.footer-disclaimer{margin-bottom:.5rem;max-width:44rem}

/* ── МОБИЛНИ ── */
@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{order:-1}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-toggle{display:block}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);flex-direction:column;align-items:flex-start;padding:1.2rem 1.5rem;gap:1rem;border-bottom:1px solid var(--border);box-shadow:var(--sh-md)}
  .main-nav.open{display:flex}
  .form-row,.form-grid-2{grid-template-columns:1fr}
}
:focus-visible{outline:2px solid var(--p3);outline-offset:2px}

/* ── Advanced bracelet configurator ────────────────────────── */
.bracelet-configurator{display:grid;grid-template-columns:minmax(430px,.95fr) 1.15fr;gap:1.5rem;align-items:start;margin-top:1.4rem}
.bracelet-preview-card,.config-panel{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:1.4rem}
.sticky-preview{position:sticky;top:5.8rem}
.bracelet-preview-title{font-family:var(--fh);font-size:1.45rem;font-weight:700;color:var(--p3);text-align:center;margin-bottom:.6rem}
.bracelet-toolbar{display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap;margin-bottom:.75rem}
.mini-action{border:1px solid var(--border);background:var(--surface);color:var(--text2);border-radius:var(--r-full);padding:.42rem .75rem;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:all var(--dt) var(--ease)}
.mini-action:hover{border-color:var(--p2);color:var(--p3);background:var(--p0);transform:translateY(-1px)}
.bracelet-circle{--radius:132px;position:relative;width:330px;height:330px;margin:0 auto 1rem;border-radius:50%;background:radial-gradient(circle at center,rgba(255,255,255,.95) 0 34%,rgba(244,236,249,.82) 35% 37%,transparent 38%),radial-gradient(circle at 50% 50%,rgba(155,53,164,.08),transparent 62%);filter:drop-shadow(0 18px 28px rgba(45,26,54,.13));touch-action:none}
.config-bead{position:absolute;left:50%;top:50%;width:var(--bead-d,27px);height:var(--bead-d,27px);margin:calc(var(--bead-d,27px) / -2);border-radius:50%;border:1px solid rgba(45,26,54,.08);background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.82),transparent 40%),var(--bead);box-shadow:0 6px 14px rgba(45,26,54,.22),inset -4px -5px 8px rgba(0,0,0,.12);transform:rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle)));transition:box-shadow var(--dt) var(--ease),outline var(--dt) var(--ease),filter var(--dt) var(--ease);cursor:grab;padding:0}
.config-bead:hover{filter:brightness(1.08);box-shadow:0 8px 18px rgba(155,53,164,.28),inset -4px -5px 8px rgba(0,0,0,.12)}
.config-bead:active{cursor:grabbing}
.config-bead.selected{outline:4px solid rgba(155,53,164,.28);box-shadow:0 0 0 8px rgba(155,53,164,.09),0 8px 18px rgba(155,53,164,.24),inset -4px -5px 8px rgba(0,0,0,.12)}
.config-bead.accent-bead{box-shadow:0 0 0 3px rgba(196,154,26,.35),0 6px 14px rgba(196,154,26,.22),inset -4px -5px 8px rgba(0,0,0,.12)}
.config-bead.accent-bead.selected{outline:4px solid rgba(155,53,164,.28);box-shadow:0 0 0 3px rgba(196,154,26,.45),0 0 0 9px rgba(155,53,164,.09),0 8px 18px rgba(155,53,164,.24),inset -4px -5px 8px rgba(0,0,0,.12)}
.selected-bead-panel{font-size:.78rem;font-weight:700;color:var(--p3);text-align:center;background:var(--p0);border-radius:var(--r-full);padding:.45rem .8rem;margin:.4rem auto .75rem;max-width:max-content}
.config-counts{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;margin-bottom:.8rem}
.config-counts span{display:inline-flex;align-items:center;gap:.32rem;font-size:.74rem;color:var(--text2);background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-full);padding:.25rem .55rem}
.config-counts i{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.78),transparent 40%),var(--bead);box-shadow:inset -2px -2px 4px rgba(0,0,0,.12)}
.config-summary{font-size:.86rem;color:var(--text2);line-height:1.58;text-align:center}
.config-section-title{font-family:var(--fh);font-size:1.22rem;font-weight:700;color:var(--p4);margin:1.15rem 0 .65rem}
.config-section-title:first-child{margin-top:0}
.form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.compact-grid .form-field{margin-bottom:.8rem}
.stone-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;max-height:380px;overflow:auto;padding:.15rem .2rem .2rem 0;margin-bottom:.55rem;scrollbar-color:var(--p2) var(--bg2)}
.stone-choice-item{display:grid;grid-template-columns:30px 1fr;align-items:stretch;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--surface);transition:all var(--dt) var(--ease);min-height:54px;overflow:hidden}
.stone-choice-item:hover{border-color:var(--p2);transform:translateY(-1px)}
.stone-choice-item.active{border-color:var(--p3);box-shadow:0 0 0 3px rgba(155,53,164,.09);background:var(--p0)}
.stone-use{display:flex;align-items:center;justify-content:center;background:rgba(245,234,248,.55);border-right:1px solid var(--border2);cursor:pointer}
.stone-use input{width:15px;height:15px;accent-color:var(--p3);cursor:pointer}
.stone-pick{display:flex;align-items:center;gap:.55rem;text-align:left;border:0;background:transparent;padding:.55rem .6rem;color:var(--text);cursor:pointer;font:inherit;font-size:.84rem;min-width:0}
.stone-pick b{font-weight:700;display:block;line-height:1.15}
.stone-pick small{display:block;color:var(--textm);font-size:.7rem;margin-top:.08rem}
.stone-swatch{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.78),transparent 40%),var(--stone);box-shadow:inset -3px -4px 7px rgba(0,0,0,.13),0 3px 8px rgba(45,26,54,.13);border:1px solid rgba(45,26,54,.08)}
.stone-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.block-note{display:block;margin-bottom:1rem;line-height:1.55}
.config-edit-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-md);padding:.9rem 1rem;margin-bottom:1rem}
.edit-actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.edit-actions .btn-sm{padding:.45rem .9rem}
@media (max-width:1000px){.bracelet-configurator{grid-template-columns:1fr}.sticky-preview{position:static}.bracelet-circle{width:300px;height:300px;--radius:118px}.stone-palette{max-height:none}}
@media (max-width:700px){.form-grid-3{grid-template-columns:1fr}.bracelet-circle{width:250px;height:250px;--radius:98px}.stone-palette{grid-template-columns:1fr}.config-panel,.bracelet-preview-card{padding:1.1rem}.mini-action{font-size:.74rem;padding:.38rem .62rem}}

/* ── MVP configurator improvements ─────────────────────────── */
.config-help-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin:1rem 0 1.25rem}
.config-help-grid div{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-md);padding:.75rem .85rem;font-size:.82rem;line-height:1.45;color:var(--text2);box-shadow:var(--sh-sm)}
.config-help-grid b{font-family:var(--fh);font-size:1.2rem;color:var(--p3);margin-right:.25rem}
.generate-config-btn{width:100%;justify-content:center;margin:.35rem 0 .65rem;box-shadow:var(--sh-brand);animation:softPulse 2.6s ease-in-out infinite}
.generate-config-btn:hover{transform:translateY(-2px) scale(1.01)}
@keyframes softPulse{0%,100%{box-shadow:var(--sh-brand)}50%{box-shadow:0 12px 32px rgba(155,53,164,.26)}}
.bead-math{font-size:.78rem;line-height:1.55;text-align:center;color:var(--text2);background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-md);padding:.58rem .75rem;margin:.6rem auto .75rem;max-width:30rem}
.bead-math b{color:var(--p4)}
.bead-math span{color:#9A5C20;font-weight:700}
.config-bead.has-image{background-size:auto,cover;background-position:center,center}
.stone-swatch.has-image{background-size:auto,cover;background-position:center,center}
.config-counts small{font-size:.68rem;color:var(--textm)}
@media (max-width:1000px){.config-help-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.config-help-grid{grid-template-columns:1fr}.generate-config-btn{font-size:.95rem;padding:.8rem 1.1rem}}

/* ── Saved configurator links ───────────────────────────────── */
.save-variation-box{margin:1rem 0;padding:.85rem;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-md)}
.saved-variation-link{margin-top:.65rem;font-size:.82rem;line-height:1.5;color:var(--text2);word-break:break-all}
.saved-variation-link a{color:var(--p3);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.saved-variation-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:2rem;text-align:center}
.saved-ring-wrap{display:flex;justify-content:center;margin:1rem 0}
.saved-ring{margin:0 auto 1rem;pointer-events:none}
.saved-ring .config-bead{display:block}
.center-actions{justify-content:center;display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}

/* ── MVP v4 form/configurator/visual pages ─────────────────── */
.step-nav{display:flex;gap:.45rem;justify-content:center;flex-wrap:wrap;margin:1rem 0 1.25rem}
.step-nav-btn{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.42rem .72rem;font:inherit;font-size:.78rem;font-weight:800;color:var(--text2);cursor:pointer;display:inline-flex;gap:.4rem;align-items:center;transition:all var(--dt) var(--ease)}
.step-nav-btn span{width:1.35rem;height:1.35rem;border-radius:50%;display:grid;place-items:center;background:var(--bg2);color:var(--p3);font-family:var(--fh);font-size:.9rem}
.step-nav-btn.active{background:var(--p3);border-color:var(--p3);color:#fff;box-shadow:var(--sh-brand)}
.step-nav-btn.active span{background:#fff;color:var(--p3)}
.step-nav-btn.done{border-color:rgba(58,191,191,.45);background:rgba(58,191,191,.08)}
.bottom-step-nav{margin-top:1.5rem;margin-bottom:.5rem}
.pill-options{display:flex;flex-wrap:wrap;gap:.5rem}
.form-pill input{position:absolute;opacity:0;pointer-events:none}
.form-pill span{display:inline-flex;align-items:center;min-height:2.2rem;border:1.5px solid var(--border);background:var(--surface);border-radius:999px;padding:.48rem .85rem;font-size:.86rem;font-weight:700;color:var(--text2);cursor:pointer;transition:all var(--dt) var(--ease)}
.form-pill input:checked + span{background:var(--p3);border-color:var(--p3);color:#fff;box-shadow:0 8px 20px rgba(155,53,164,.18)}
.form-pill:hover span{border-color:var(--p2);transform:translateY(-1px)}
.prominent-save{margin:.2rem 0 .9rem;background:linear-gradient(135deg,rgba(155,53,164,.08),rgba(58,191,191,.08));border-color:rgba(155,53,164,.18)}
.generate-config-btn{width:auto!important;min-width:0;padding:.58rem 1rem!important;animation:none!important;box-shadow:none!important;margin:.25rem 0 .65rem}
.measure-hero-illustration{display:grid;place-items:center;margin:1.5rem 0 1.8rem}
.wrist-illo{position:relative;width:min(100%,420px);height:180px;border-radius:32px;background:linear-gradient(135deg,#fff,#f9f3fb);border:1px solid var(--border2);box-shadow:var(--sh-sm);overflow:hidden}
.hand-line{position:absolute;left:70px;right:70px;top:76px;height:44px;border-radius:30px;background:linear-gradient(90deg,#F7D8C9,#F0BCA5);box-shadow:inset 0 -10px 18px rgba(122,64,42,.08)}
.tape-line{position:absolute;left:155px;top:48px;width:110px;height:90px;border:4px dashed var(--p3);border-radius:50%;transform:rotate(-8deg)}
.mark-dot{position:absolute;left:254px;top:75px;width:12px;height:12px;background:var(--p3);border-radius:50%;box-shadow:0 0 0 6px rgba(155,53,164,.12)}
.wrist-illo em{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-size:.8rem;color:var(--textm);font-style:normal;font-weight:700}
.visual-guide-grid,.how-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.2rem 0}
.visual-step-card,.how-flow-card,.process-visual-card,.measure-note-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:1.2rem}
.visual-step-card h3,.how-flow-card h3{font-family:var(--fh);font-size:1.3rem;color:var(--p4);margin:.5rem 0 .3rem}
.visual-icon{width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,var(--p0),rgba(58,191,191,.12));position:relative}
.tape-icon:after{content:'';position:absolute;left:12px;top:20px;width:30px;height:14px;border:3px dashed var(--p3);border-radius:50%}
.thread-icon:after{content:'';position:absolute;left:12px;top:15px;width:30px;height:24px;border:3px solid var(--p3);border-color:var(--p3) transparent var(--p3) var(--p3);border-radius:50%}
.ruler-icon:after{content:'';position:absolute;left:10px;top:25px;width:34px;height:8px;background:var(--p3);border-radius:4px;box-shadow:8px -8px 0 -2px var(--p2),16px -8px 0 -2px var(--p2)}
.how-flow{grid-template-columns:repeat(7,minmax(0,1fr));gap:.7rem}
.how-flow-card{padding:1rem .85rem;text-align:center}
.how-num{width:2rem;height:2rem;border-radius:50%;background:var(--p3);color:#fff;display:grid;place-items:center;margin:0 auto .6rem;font-family:var(--fh);font-weight:700}
.how-flow-card h3{font-size:1.05rem}.how-flow-card p{font-size:.78rem;color:var(--text2);line-height:1.45}
.offer-public-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin:1rem 0}
.offer-info-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-md);padding:1rem;text-align:left}.offer-info-box span{display:block;color:var(--textm);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.offer-info-box b{font-size:1.35rem;color:var(--p4)}
.payment-info{background:linear-gradient(135deg,rgba(196,154,26,.1),rgba(155,53,164,.06));border:1px solid rgba(196,154,26,.25);border-radius:var(--r-lg);padding:1rem;margin:1rem 0;text-align:left}.payment-info h3{font-family:var(--fh);font-size:1.3rem;color:var(--p4)}.strong-check{background:var(--p0);border-radius:var(--r-md);padding:.8rem;margin:1rem 0}.compact-success{padding:1.2rem;margin-bottom:1rem}
@media(max-width:1000px){.how-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-guide-grid{grid-template-columns:1fr}.offer-public-grid{grid-template-columns:1fr}}
@media(max-width:640px){.step-nav-btn{font-size:.72rem;padding:.36rem .55rem}.how-flow{grid-template-columns:1fr}.wrist-illo{height:150px}.hand-line{left:40px;right:40px}.tape-line{left:115px}}


/* ── MVP v5 layout fixes ───────────────────────────────────── */
.top-funnel-actions{margin:.2rem 0 1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--border2)}
.bottom-funnel-actions{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--border2)}
.funnel-actions{display:flex;justify-content:flex-end;gap:.75rem;flex-wrap:wrap}
.funnel-actions .btn-ghost{margin-right:auto}
.preview-edit-tools{margin-top:1rem;text-align:left}
.preview-edit-tools .config-section-title{font-size:1.05rem;text-align:center;margin:.7rem 0 .55rem}
.preview-edit-tools .config-edit-box{margin-bottom:0}
.edit-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.measure-image-slot{background:linear-gradient(135deg,#fff,#fbf6fd);border:2px dashed rgba(155,53,164,.28);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:2rem;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:1.5rem 0 1.8rem;color:var(--text2)}
.measure-image-slot:before{content:'+';width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--p0);color:var(--p3);font-family:var(--fh);font-size:2.4rem;margin-bottom:.8rem}
.image-slot-label{font-family:var(--fh);font-size:1.55rem;font-weight:700;color:var(--p4);margin-bottom:.35rem}
.measure-image-slot small{color:var(--textm);font-weight:700;margin-top:.3rem}
.how-page-intro{max-width:760px;margin:0 auto 2rem;text-align:center}.how-page-intro .section-sub{text-align:center;margin-left:auto}
.how-process-map{position:relative;max-width:980px;margin:2rem auto;display:flex;flex-direction:column;gap:.9rem}
.how-process-map:before{content:'';position:absolute;left:31px;top:28px;bottom:28px;width:2px;background:linear-gradient(var(--p1),rgba(58,191,191,.36),var(--p1));border-radius:99px}
.how-map-step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:1rem;align-items:stretch}
.how-map-num{position:relative;z-index:1;width:64px;height:64px;border-radius:22px;background:var(--pg-btn);color:#fff;display:grid;place-items:center;font-family:var(--fh);font-weight:800;font-size:1.28rem;box-shadow:var(--sh-brand)}
.how-map-card{background:linear-gradient(145deg,#fff,#fbf7fd);border:1px solid var(--border2);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:1.15rem 1.3rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;transition:transform var(--dt) var(--ease), box-shadow var(--dt) var(--ease)}
.how-map-step:hover .how-map-card{transform:translateX(4px);box-shadow:var(--sh-md)}
.how-map-card h3{font-family:var(--fh);font-size:1.35rem;color:var(--p4);margin:0 0 .18rem}.how-map-card p{margin:0;color:var(--text2);font-size:.92rem;line-height:1.65}
.how-map-tag{justify-self:end;white-space:nowrap;border-radius:999px;padding:.32rem .7rem;background:var(--p0);color:var(--p3);font-size:.72rem;font-weight:800}
.how-after-card{max-width:980px;margin:1.2rem auto 0;display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;align-items:stretch}.how-after-card .process-visual-card{margin:0}.how-mini-card{background:linear-gradient(135deg,rgba(58,191,191,.1),rgba(155,53,164,.07));border:1px solid var(--border2);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:1.35rem}.how-mini-card h2{font-family:var(--fh);font-size:1.55rem;color:var(--p4);margin-bottom:.45rem}.how-mini-card p{color:var(--text2);line-height:1.75}
.faq-masonry{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:1rem 1.15rem;margin:1.4rem auto 2rem;max-width:1180px}
.faq-masonry-item{margin:0;display:block;flex:1 1 31%;min-width:280px;max-width:520px;border-radius:1.15rem;background:linear-gradient(145deg,#fff,#fbf6fd);border:1.5px solid rgba(155,53,164,.13);box-shadow:0 8px 24px rgba(45,26,54,.06);overflow:hidden;transition:transform var(--dt) var(--ease), box-shadow var(--dt) var(--ease), border-color var(--dt) var(--ease)}
.faq-masonry-item:nth-child(6n+1),.faq-masonry-item:nth-child(6n+6){flex-basis:42%}
.faq-masonry-item:nth-child(6n+2),.faq-masonry-item:nth-child(6n+5){flex-basis:34%}
.faq-masonry-item:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:rgba(155,53,164,.28)}
.faq-masonry-item summary{padding:1rem 3rem 1rem 1.25rem;font-size:.92rem;line-height:1.35}
.faq-tag{display:inline-block;margin:0 1.25rem .35rem;padding:.18rem .55rem;border-radius:999px;background:var(--p0);color:var(--p3);font-size:.72rem;font-weight:800}
.faq-masonry-item p{padding:.25rem 1.25rem 1.1rem}
.faq-masonry-compact{max-width:980px}.faq-masonry-compact .faq-masonry-item{flex-basis:42%;max-width:480px}
@media (max-width:860px){.form-grid-2{grid-template-columns:1fr}.funnel-actions .btn-ghost{margin-right:0}.funnel-actions{justify-content:stretch}.funnel-actions .btn{flex:1}.how-flow.how-flow-vertical .how-flow-card{grid-template-columns:1fr;text-align:center}.how-flow.how-flow-vertical .how-num{margin:0 auto}.measure-image-slot{min-height:210px;padding:1.4rem}}

.occ-fields.show.form-grid-2{display:grid}


/* ── MVP v6 width, funnel layout and FAQ refinements ───────── */
@media (max-width:700px){.shell,.shell.narrow{width:min(92%,1320px)}}
.step2-combined-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.step2-combined-grid .occ-fields{display:none}
.step2-combined-grid .occ-fields.show{display:contents}
.step2-combined-grid .form-field{margin-bottom:0}
.step2-combined-grid .field-full{grid-column:1/-1}
.bracelet-toolbar-main{background:linear-gradient(135deg,rgba(155,53,164,.07),rgba(58,191,191,.07));border:1px solid var(--border2);border-radius:var(--r-lg);padding:.75rem;margin-bottom:1rem;box-shadow:var(--sh-sm)}
.toolbar-help{font-size:.78rem;color:var(--text2);line-height:1.55;text-align:center;margin:-.25rem auto .8rem;max-width:42rem}
.config-panel .config-edit-box,.config-panel .preview-edit-tools{display:none!important}
.faq-page .page-title{text-align:center}.faq-page .section-sub{text-align:center;margin-left:auto}
@media (max-width:1000px){.bracelet-configurator{grid-template-columns:1fr}.how-after-card{grid-template-columns:1fr}.how-map-card{grid-template-columns:1fr}.how-map-tag{justify-self:start}}
@media (max-width:700px){.step2-combined-grid{grid-template-columns:1fr}.how-process-map:before{left:24px}.how-map-step{grid-template-columns:50px 1fr;gap:.8rem}.how-map-num{width:50px;height:50px;border-radius:18px}.how-map-card{padding:1rem}.faq-masonry{display:grid;grid-template-columns:1fr}.faq-masonry-item,.faq-masonry-item:nth-child(n){max-width:none;min-width:0}}
.how-page .preparation{max-width:980px;margin:2rem auto 0}

/* ── MVP v7 corrective layout pass ───────────────────────────
   Fixes: real 90% layout, compact configurator controls,
   real 2-column form grid, redesigned how-it-works, FAQ wrap masonry.
────────────────────────────────────────────────────────────── */
.shell,.shell.narrow{width:90vw!important;max-width:1540px!important;margin-left:auto!important;margin-right:auto!important}
@media(max-width:700px){.shell,.shell.narrow{width:94vw!important}}
.section .content-block{max-width:min(920px,100%)}

/* Step 2 must truly become a two-column form, with only long fields full width. */
.step2-combined-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:1rem 1.2rem!important;align-items:start!important;width:100%!important;max-width:none!important}
.step2-combined-grid>.occ-fields{display:none!important}
.step2-combined-grid>.occ-fields.show{display:contents!important}
.step2-combined-grid .form-field{min-width:0!important;width:100%!important;margin-bottom:0!important;grid-column:auto!important}
.step2-combined-grid .form-field.field-full{grid-column:1/-1!important}
.step2-combined-grid .form-field.field-half{grid-column:auto!important}
.step2-combined-grid .pill-field:not(.field-full){grid-column:auto!important}
.step2-combined-grid .pill-options{gap:.5rem .55rem!important;align-items:flex-start!important}
.step2-combined-grid textarea{min-height:92px}
@media(max-width:760px){.step2-combined-grid{grid-template-columns:1fr!important}}

/* Make the configurator toolbar useful, not noisy. Drag/drop replaces move-left/right. */
.hidden-config-control{display:none!important}
.bracelet-toolbar-main.compact-toolbar{max-width:620px;margin:.8rem auto 1rem!important;padding:.6rem!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:.5rem!important;background:linear-gradient(135deg,rgba(155,53,164,.06),rgba(58,191,191,.06))!important;border-radius:999px!important}
.compact-toolbar .mini-action,.compact-toolbar .btn-sm{white-space:nowrap;padding:.5rem .9rem!important;font-size:.82rem!important}
.toolbar-help{max-width:620px!important;margin:-.2rem auto 1rem!important;font-size:.78rem!important;text-align:center!important;color:var(--text2)!important}
.generate-config-btn{width:auto!important;min-width:0!important;display:inline-flex!important;margin:.35rem 0 .85rem!important;padding:.55rem 1.15rem!important;animation:none!important}
.config-panel .generate-config-btn{justify-content:center!important}
@media(max-width:700px){.bracelet-toolbar-main.compact-toolbar{border-radius:var(--r-lg)!important}.compact-toolbar .mini-action,.compact-toolbar .btn-sm{flex:1 1 46%;justify-content:center}}

/* Redesigned How it works page: wide, simple roadmap instead of cramped cards. */
.how-hero-clean{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(320px,1.2fr);gap:2rem;align-items:end;margin:0 auto 2.4rem;max-width:1180px}
.how-hero-clean .page-title{margin-bottom:0}.how-hero-clean p{color:var(--text2);line-height:1.85;font-size:1.02rem;margin:0}
.how-roadmap{position:relative;max-width:1180px;margin:0 auto 2.2rem;display:grid;grid-template-columns:1fr 76px 1fr;row-gap:1rem}
.how-roadmap:before{content:'';grid-column:2;grid-row:1/-1;justify-self:center;width:2px;background:linear-gradient(180deg,transparent,var(--p1),rgba(58,191,191,.35),var(--p1),transparent);border-radius:99px}
.road-step{display:contents}.road-num{grid-column:2;width:58px;height:58px;justify-self:center;align-self:center;border-radius:21px;background:var(--pg-btn);color:#fff;display:grid;place-items:center;font-family:var(--fh);font-weight:800;font-size:1.18rem;box-shadow:var(--sh-brand);position:relative;z-index:1}.road-card{grid-column:1;background:linear-gradient(145deg,#fff,#fbf7fd);border:1px solid var(--border2);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:1.2rem 1.35rem;min-height:120px;display:flex;flex-direction:column;justify-content:center;transition:transform var(--dt) var(--ease),box-shadow var(--dt) var(--ease)}
.road-step-alt .road-card{grid-column:3}.road-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}.road-tag{display:inline-flex;width:max-content;border-radius:999px;background:var(--p0);color:var(--p3);font-size:.72rem;font-weight:800;padding:.22rem .65rem;margin-bottom:.45rem}.road-card h3{font-family:var(--fh);font-size:1.38rem;color:var(--p4);margin:0 0 .25rem}.road-card p{color:var(--text2);line-height:1.65;font-size:.92rem;margin:0}.how-info-grid{max-width:1180px;margin:1.2rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.how-info-card{background:#fff;border:1px solid var(--border2);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:1.35rem}.how-info-card.soft{background:linear-gradient(135deg,rgba(58,191,191,.1),rgba(155,53,164,.07))}.how-info-card h2{font-family:var(--fh);font-size:1.55rem;color:var(--p4);margin-bottom:.45rem}.how-info-card p{color:var(--text2);line-height:1.75;margin:0}
.how-page .preparation{max-width:1180px!important;margin:2rem auto 0!important}
@media(max-width:860px){.how-hero-clean{grid-template-columns:1fr;gap:.7rem}.how-roadmap{grid-template-columns:54px 1fr;row-gap:.85rem}.how-roadmap:before{grid-column:1}.road-num{grid-column:1;width:48px;height:48px;border-radius:17px;font-size:1rem}.road-card,.road-step-alt .road-card{grid-column:2;min-height:auto}.how-info-grid{grid-template-columns:1fr}}

/* FAQ: wrapped masonry/pill rows like the reference, not category columns. */
.faq-masonry{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;justify-content:center!important;gap:1rem 1.15rem!important;margin:1.6rem auto 2.2rem!important;max-width:1320px!important;width:100%!important}
.faq-masonry-item{flex:0 1 auto!important;width:clamp(290px,31vw,540px)!important;min-width:260px!important;max-width:560px!important;margin:0!important;border-radius:1.1rem!important;background:linear-gradient(145deg,#fff,#fbf6fd)!important;border:1.5px solid rgba(155,53,164,.16)!important;box-shadow:0 8px 24px rgba(45,26,54,.06)!important;overflow:hidden!important}
.faq-masonry-item:nth-child(7n+1),.faq-masonry-item:nth-child(7n+5){width:clamp(340px,44vw,680px)!important}
.faq-masonry-item:nth-child(7n+2),.faq-masonry-item:nth-child(7n+6){width:clamp(300px,36vw,590px)!important}
.faq-masonry-item summary{padding:1rem 3.1rem 1rem 1.25rem!important;font-size:.92rem!important;line-height:1.35!important;font-weight:800!important;display:block!important}
.faq-masonry-item summary::after{right:1.15rem!important;top:50%!important;transform:translateY(-50%)!important;color:var(--p3)!important}
.faq-masonry-item p{padding:.2rem 1.25rem 1.1rem!important;color:var(--text2)!important;line-height:1.7!important}
.faq-tag{display:inline-block!important;margin:0 1.25rem .35rem!important;padding:.18rem .55rem!important;border-radius:999px!important;background:var(--p0)!important;color:var(--p3)!important;font-size:.72rem!important;font-weight:800!important}
.faq-masonry-compact{max-width:1180px!important}.faq-masonry-compact .faq-masonry-item{width:clamp(290px,39vw,560px)!important;max-width:590px!important}
@media(max-width:760px){.faq-masonry{display:grid!important;grid-template-columns:1fr!important}.faq-masonry-item,.faq-masonry-item:nth-child(n){width:100%!important;min-width:0!important;max-width:none!important}}