/* ============================================================
   IZOATE NAME BLENDER — Complete Stylesheet
   ============================================================ */

#inb-root {
    --color-primary:      #E30B5C;
    --color-primary-deep: #B5094A;
    --color-blush:        #FFE0E9;
    --color-blush-mid:    #F5B8CC;
    --color-blush-dark:   #E8B4C4;
    --color-rose-whisper: #FFF0F4;
    --color-ivory:        #FFF8FA;
    --color-text:         #1A0A10;
    --color-white:        #FFFFFF;

    --font-expressive: 'Merienda', serif;
    --font-functional: 'DM Sans', sans-serif;

    --space-1:  8px;
    --space-2:  16px;
    --space-3:  24px;
    --space-4:  40px;
    --space-5:  64px;
    --space-6:  80px;

    --radius-sm:   8px;
    --radius-md:   16px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-pill: 100px;

    --shadow-input:       0 4px 20px rgba(227,11,92,0.06);
    --shadow-input-focus: 0 4px 24px rgba(227,11,92,0.18), 0 0 0 4px rgba(227,11,92,0.08);
    --shadow-button:      0 8px 24px rgba(227,11,92,0.30);
    --shadow-button-hover:0 12px 32px rgba(227,11,92,0.40);
    --shadow-card:        0 4px 16px rgba(227,11,92,0.08);
    --shadow-card-hover:  0 8px 28px rgba(227,11,92,0.16);
    --shadow-hero:        0 24px 64px rgba(227,11,92,0.35), 0 8px 20px rgba(227,11,92,0.20);

    --ease-standard:   cubic-bezier(0.4,0,0.2,1);
    --ease-out:        cubic-bezier(0,0,0.2,1);
    --ease-in:         cubic-bezier(0.4,0,1,1);
    --ease-expressive: cubic-bezier(0.34,1.56,0.64,1);
    --ease-spring:     cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ── Reset & Base ─────────────────────────────────────────── */
#inb-root *,
#inb-root *::before,
#inb-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#inb-root {
    position:        relative;
    width:           100%;
    min-height:      100vh;
    background:      linear-gradient(135deg, var(--color-ivory) 0%, var(--color-blush) 100%);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    padding:         var(--space-5) 32px var(--space-6);
    overflow:        hidden;
    font-family:     var(--font-functional);
    color:           var(--color-text);
}

/* ── Background Orbs ─────────────────────────────────────── */
.inb-orb {
    position:       absolute;
    border-radius:  50%;
    background:     var(--color-blush);
    filter:         blur(80px);
    pointer-events: none;
    will-change:    transform;
    z-index:        0;
}
.inb-orb-1 {
    width: 420px; height: 420px;
    top: -100px; right: -80px;
    opacity: 0.55;
    animation: orbDrift1 26s var(--ease-spring) infinite alternate;
}
.inb-orb-2 {
    width: 320px; height: 320px;
    bottom: 8%; left: -70px;
    opacity: 0.40;
    animation: orbDrift2 32s var(--ease-spring) infinite alternate;
}
.inb-orb-3 {
    width: 210px; height: 210px;
    top: 38%; right: 4%;
    opacity: 0.30;
    animation: orbDrift3 21s var(--ease-spring) infinite alternate;
}
@keyframes orbDrift1 {
    from { transform: translate(0,0); }
    to   { transform: translate(-32px,42px); }
}
@keyframes orbDrift2 {
    from { transform: translate(0,0); }
    to   { transform: translate(42px,-32px); }
}
@keyframes orbDrift3 {
    from { transform: translate(0,0); }
    to   { transform: translate(-22px,22px); }
}

/* ── Header ──────────────────────────────────────────────── */
.inb-header {
    text-align:    center;
    margin-bottom: var(--space-4);
    position:      relative;
    z-index:       2;
}
.inb-title-wrap {
    position:      relative;
    display:       inline-block;
    margin-bottom: var(--space-1);
}
.inb-title {
    font-family:    var(--font-expressive);
    font-weight:    700;
    font-size:      clamp(30px, 5vw, 48px);
    line-height:    1.2;
    letter-spacing: -0.01em;
    color:          var(--color-text);
}
.inb-underline-svg {
    position:  absolute;
    bottom:    -8px;
    left:      50%;
    transform: translateX(-50%);
    width:     72%;
    height:    14px;
    overflow:  visible;
}
.inb-underline-path {
    stroke-dasharray:  240;
    stroke-dashoffset: 240;
    animation: drawLine 1s var(--ease-out) 0.5s forwards;
}
@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}
.inb-subtitle {
    font-size:   15px;
    line-height: 1.6;
    color:       rgba(26,10,16,0.58);
    margin-top:  var(--space-2);
}

/* ── Progress ─────────────────────────────────────────────── */
.inb-progress {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    margin-bottom:   var(--space-4);
    position:        relative;
    z-index:         2;
}
.inb-dot {
    display:       block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--color-blush-mid);
    transition:    background 280ms var(--ease-standard),
                   width 280ms var(--ease-expressive),
                   height 280ms var(--ease-expressive);
}
.inb-dot.active {
    width:      12px;
    height:     12px;
    background: var(--color-primary);
    animation:  dotPulse 2s var(--ease-standard) infinite;
}
.inb-dot.done {
    background: rgba(227,11,92,0.45);
}
@keyframes dotPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(227,11,92,0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(227,11,92,0); }
}

/* ── Steps Container ─────────────────────────────────────── */
.inb-steps {
    position:  relative;
    width:     100%;
    max-width: 680px;
    z-index:   2;
    flex:      1 1 auto;
    display:   flex;
    align-items: center;
    justify-content: center;
}
.inb-step {
    display: none;
    width:   100%;
}
.inb-step.active {
    display:   block;
    animation: stepIn 560ms var(--ease-out) both;
}
.inb-step.exiting {
    animation: stepOut 300ms var(--ease-in) both;
}
@keyframes stepIn {
    from { opacity:0; transform: translateY(32px); }
    to   { opacity:1; transform: translateY(0);    }
}
@keyframes stepOut {
    from { opacity:1; transform: translateY(0);     }
    to   { opacity:0; transform: translateY(-24px); }
}
.inb-step-inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        var(--space-4) 0;
    min-height:     340px;
}

/* ── Step Typography ─────────────────────────────────────── */
.inb-prompt {
    font-family:    var(--font-expressive);
    font-weight:    400;
    font-size:      clamp(22px,3.5vw,34px);
    line-height:    1.3;
    color:          var(--color-text);
    margin-bottom:  var(--space-2);
}
.inb-subtext {
    font-size:     13px;
    color:         rgba(26,10,16,0.50);
    margin-bottom: var(--space-4);
}
.inb-echo {
    font-family:   var(--font-expressive);
    font-size:     15px;
    font-style:    italic;
    color:         rgba(26,10,16,0.38);
    margin-bottom: var(--space-3);
    min-height:    22px;
}

/* ── Input ───────────────────────────────────────────────── */
.inb-field {
    position:  relative;
    width:     100%;
    max-width: 460px;
    margin:    0 auto var(--space-4);
}
.inb-label {
    display:        block;
    font-weight:    500;
    font-size:      11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          rgba(26,10,16,0.52);
    margin-bottom:  var(--space-1);
    text-align:     left;
    transition:     color 250ms var(--ease-standard);
}
.inb-field:focus-within .inb-label {
    color: var(--color-primary);
}
.inb-input {
    width:          100%;
    background:     var(--color-white);
    border:         2px solid var(--color-blush-mid);
    border-radius:  var(--radius-md);
    padding:        20px 24px;
    font-family:    var(--font-expressive);
    font-size:      clamp(20px,3vw,26px);
    color:          var(--color-text);
    outline:        none;
    box-shadow:     var(--shadow-input);
    caret-color:    var(--color-primary);
    text-align:     center;
    -webkit-appearance: none;
    appearance:         none;
    transition:     border-color 250ms var(--ease-standard),
                    box-shadow   250ms var(--ease-standard),
                    transform    250ms var(--ease-standard);
}
.inb-input::placeholder {
    font-family: var(--font-functional);
    font-size:   15px;
    color:       rgba(26,10,16,0.26);
}
.inb-input:focus {
    border-color: var(--color-primary);
    box-shadow:   var(--shadow-input-focus);
    transform:    translateY(-2px);
}
.inb-hint {
    display:    block;
    font-size:  11px;
    color:      rgba(26,10,16,0.35);
    margin-top: 6px;
    text-align: left;
}

/* ── Buttons ─────────────────────────────────────────────── */
.inb-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    font-family:     var(--font-functional);
    font-weight:     600;
    font-size:       14px;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    cursor:          pointer;
    border:          none;
    outline:         none;
    position:        relative;
    overflow:        hidden;
    -webkit-tap-highlight-color: transparent;
    transition:
        background   250ms var(--ease-standard),
        box-shadow   250ms var(--ease-standard),
        transform    250ms var(--ease-expressive),
        border-color 250ms var(--ease-standard),
        color        250ms var(--ease-standard);
}
.inb-btn-primary {
    background:    var(--color-primary);
    color:         var(--color-white);
    padding:       18px 48px;
    border-radius: var(--radius-pill);
    box-shadow:    var(--shadow-button);
    min-width:     200px;
}
#inb-root .inb-btn-primary:hover:not(:disabled) {
    background:  var(--color-primary-deep) !important;
    color:       var(--color-white) !important;
    box-shadow:  var(--shadow-button-hover);
    transform:   translateY(-2px);
}
.inb-btn-primary:active:not(:disabled) {
    transform:  translateY(0);
    box-shadow: 0 4px 12px rgba(227,11,92,0.25);
}
.inb-btn-primary:disabled {
    background:  var(--color-blush-mid);
    box-shadow:  none;
    cursor:      not-allowed;
    transform:   none;
}
.inb-btn-ghost {
    background:    transparent;
    color:         var(--color-primary);
    padding:       16px 60px;
    border:        2px solid var(--color-primary);
    border-radius: var(--radius-pill);
}
#inb-root .inb-btn-ghost:hover {
    background:   rgba(227,11,92,0.06) !important;
    border-color: var(--color-primary-deep) !important;
    color:        var(--color-primary-deep) !important;
    transform:    translateY(-2px);
}
.inb-btn-text {
    background:    transparent;
    color:         rgba(26,10,16,0.42);
    padding:       18px 28px;
    border:        none;
    border-radius: var(--radius-pill);
    font-size:     13px;
}
#inb-root .inb-btn-text:hover {
    background: transparent !important;
    color:      var(--color-text) !important;
}
/* Optimization: the primary buttons already had a disabled treatment;
   the ghost/text buttons (regenerate / restart) did not, so a disabled
   state during in-flight transitions was visually silent. */
.inb-btn-ghost:disabled,
.inb-btn-text:disabled {
    opacity:        0.5;
    cursor:         not-allowed;
    pointer-events: none;
}

/* Ripple */
.inb-btn-primary::after {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    rgba(255,255,255,0.18);
    border-radius: inherit;
    opacity:       0;
    transition:    opacity 500ms var(--ease-out);
}
.inb-btn-primary:active:not(:disabled)::after {
    opacity: 1;
}

/* ── Loading Dots ────────────────────────────────────────── */
.inb-dots {
    display:     flex;
    gap:         6px;
    align-items: center;
}
.inb-dots span {
    display:       block;
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--color-white);
    animation:     dotBounce 1.2s var(--ease-standard) infinite both;
}
.inb-dots span:nth-child(2) { animation-delay: 0.16s; }
.inb-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes dotBounce {
    0%,80%,100% { transform:scale(0.7); opacity:0.5; }
    40%          { transform:scale(1.1); opacity:1;   }
}
.inb-btn-primary .inb-btn-label { transition: opacity 200ms; }
.inb-btn-primary .inb-dots      { position:absolute; opacity:0; transition: opacity 200ms; }
.inb-btn-primary.loading .inb-btn-label { opacity:0; }
.inb-btn-primary.loading .inb-dots      { opacity:1; }

/* ── Arrow Icon ──────────────────────────────────────────── */
.inb-arrow {
    transition: transform 250ms var(--ease-standard);
    flex-shrink: 0;
}
.inb-btn-primary:hover:not(:disabled) .inb-arrow {
    transform: translateX(3px);
}

/* ── Connector (Step 3) ──────────────────────────────────── */
.inb-connector {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             10px;
    margin-bottom:   var(--space-4);
}
.inb-con-name {
    font-family:    var(--font-expressive);
    font-weight:    700;
    font-size:      clamp(22px,4vw,36px);
    color:          var(--color-text);
    opacity:        0;
    transform:      translateX(-20px);
    transition:     opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.inb-con-name.right { transform: translateX(20px); }
.inb-con-name.show  { opacity:1; transform:translateX(0); }
.inb-con-sym {
    font-family:  var(--font-expressive);
    font-size:    clamp(22px,4vw,36px);
    color:        var(--color-primary);
    padding:      0 6px;
    opacity:      0;
    transform:    scale(0.4);
    transition:   opacity 380ms var(--ease-expressive), transform 380ms var(--ease-expressive);
}
.inb-con-sym.show {
    opacity:   1;
    transform: scale(1);
    animation: conPulse 2s var(--ease-standard) infinite;
}
@keyframes conPulse {
    0%,100% { transform:scale(1.0); }
    50%      { transform:scale(1.10); }
}

/* ── Processing ──────────────────────────────────────────── */
.inb-processing {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-2);
    margin-top:     var(--space-2);
}
.inb-processing-text {
    font-family:  var(--font-expressive);
    font-size:    18px;
    color:        rgba(26,10,16,0.68);
    position:     relative;
    overflow:     hidden;
}
.inb-processing-text::after {
    content:    '';
    position:   absolute;
    top:        0; left: -100%;
    width:      100%; height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);
    animation:  shimmer 1.8s var(--ease-standard) infinite;
}
@keyframes shimmer {
    0%   { left:-100%; }
    100% { left: 200%; }
}
.inb-proc-dots {
    display:     flex;
    gap:         8px;
    align-items: center;
}
.inb-proc-dots span {
    display:       block;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    var(--color-blush-mid);
    animation:     procDot 1.4s var(--ease-standard) infinite both;
}
.inb-proc-dots span:nth-child(2) { animation-delay: 0.2s; }
.inb-proc-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes procDot {
    0%,80%,100% { transform:scale(0.6); opacity:0.4; background:var(--color-blush-mid); }
    40%          { transform:scale(1.2); opacity:1;   background:var(--color-primary);   }
}

/* ── Hero Reveal Card ────────────────────────────────────── */
.inb-reveal {
    width:      100%;
    text-align: center;
}
.inb-reveal-pretitle {
    font-weight:    500;
    font-size:      11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          rgba(26,10,16,0.42);
    margin-top:     18px; /* dedicated space from the progress dots above */
    margin-bottom:  12px; /* label → card: close enough to read as a caption for it */
}
.inb-hero-card {
    position:      relative;
    background:    linear-gradient(170deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
    border-radius: var(--radius-xl);
    padding:       clamp(40px,6vw,56px) clamp(28px,5vw,48px);
    box-shadow:    var(--shadow-hero);
    overflow:      hidden;
    animation:     heroReveal 560ms var(--ease-expressive) both;
}
.inb-hero-card.floating {
    animation: heroReveal 560ms var(--ease-expressive) both,
               heroFloat  4s var(--ease-spring) 0.9s infinite;
}
@keyframes heroReveal {
    from { opacity:0; transform:scale(0.88) translateY(24px); }
    to   { opacity:1; transform:scale(1)    translateY(0);    }
}
@keyframes heroFloat {
    0%,100% { transform:translateY(0);    }
    50%      { transform:translateY(-7px); }
}
.inb-hero-shimmer {
    position:  absolute;
    top:0; left:-100%;
    width:100%; height:100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,0.11),transparent);
    animation:  cardShimmer 3s var(--ease-standard) 0.8s 1 forwards;
    pointer-events: none;
}
@keyframes cardShimmer {
    0%   { left:-100%; }
    100% { left: 200%; }
}
.inb-hero-orb {
    position:       absolute;
    border-radius:  50%;
    background:     rgba(255,255,255,0.07);
    pointer-events: none;
}
.inb-hero-orb-1 { width:230px;height:230px; top:-65px;  right:-45px; filter:blur(40px); }
.inb-hero-orb-2 { width:140px;height:140px; bottom:-35px; left:-25px; filter:blur(30px); }

.inb-hero-name {
    font-family:    var(--font-expressive);
    font-weight:    700;
    font-size:      clamp(46px,8vw,78px);
    line-height:    1.15;
    letter-spacing: -0.02em;
    color:          var(--color-white);
    text-shadow:    0 2px 20px rgba(0,0,0,0.14);
    position:       relative;
    z-index:        1;
    margin-bottom:  18px; /* name → pronunciation */
    overflow-wrap:  break-word;
    opacity:        0;
    transform:      translateY(14px);
    transition:     opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.inb-hero-name.show {
    opacity:   1;
    transform: translateY(0);
}
.inb-hero-pronunc {
    font-size:    13px;
    font-style:   italic;
    line-height:  1.5;
    color:        rgba(255,255,255,0.66);
    margin-bottom: 16px; /* pronunciation → description */
    min-height:   18px;
    position:     relative;
    z-index:      1;
}
.inb-hero-desc-label {
    font-weight:    600;
    font-size:      11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.65);
    text-align:     center;
    margin-bottom:  14px; /* label → box: its own breathing room, separate
                              from the pronunciation → label gap above it */
    position:       relative;
    z-index:        1;
}
#inb-root .inb-hero-desc-wrap {
    display:         flex !important;
    justify-content: center !important;
    width:           100% !important;
    margin-bottom:   20px; /* box → divider/tag */
}
#inb-root .inb-hero-desc {
    display:       block !important;
    box-sizing:    border-box !important;
    text-align:    center !important;
    font-size:     15px;
    font-style:    italic;
    color:         var(--color-primary);
    background:    var(--color-white);
    max-width:     340px;
    width:         100%;
    margin:        0 !important; /* centering now comes from the flex wrapper */
    padding:       14px 24px;
    border-radius: var(--radius-lg);
    box-shadow:    0 4px 14px rgba(0,0,0,0.12);
    line-height:   1.6;
    position:      relative;
    z-index:       1;
}
.inb-hero-tag {
    font-weight:    500;
    font-size:      11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.48);
    border-top:     1px solid rgba(255,255,255,0.14);
    padding-top:    18px;
    position:       relative;
    z-index:        1;
}

/* ── Actions ─────────────────────────────────────────────── */
.inb-actions {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             20px;
    width:           100%;
    margin-top:      28px; /* main graphic → action buttons — the only margin
                               controlling this gap, so it can't stack with
                               anything above it */
}
.inb-btn-reserve {
    width:     100%;
    max-width: 340px;
}
.inb-secondary-actions {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             36px;
}
.inb-regen-hint {
    font-size:  12px;
    color:      rgba(26,10,16,0.38);
    text-align: center;
    margin-top: 16px; /* buttons → supporting text */
}

/* ── Reservation ─────────────────────────────────────────── */
.inb-reserve-panel {
    width:     100%;
    max-width: 400px;
    margin:    20px auto 0;
}
.inb-reserve-form {
    display:        none;
    flex-direction: column;
    align-items:    stretch;
    gap:            12px;
    background:     var(--color-white);
    border:         1.5px solid var(--color-blush-mid);
    border-radius:  var(--radius-lg);
    padding:        24px;
    box-shadow:     var(--shadow-card);
}
.inb-reserve-form.show {
    display: flex;
}
.inb-reserve-label {
    font-family: var(--font-expressive);
    font-size:   20px;
    color:       var(--color-text);
    text-align:  center;
}
.inb-reserve-sublabel {
    font-size:     12px;
    color:         rgba(26,10,16,0.5);
    text-align:    center;
    margin-bottom: 4px;
}
.inb-reserve-fields {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}
.inb-reserve-input {
    width:          100%;
    padding:        12px 16px;
    border:         2px solid var(--color-blush-mid);
    border-radius:  var(--radius-md);
    font-family:    var(--font-functional);
    font-size:      14px;
    color:          var(--color-text);
    outline:        none;
    box-sizing:     border-box;
    transition:     border-color 250ms var(--ease-standard);
}
.inb-reserve-input::placeholder {
    color: rgba(26,10,16,0.32);
}
.inb-reserve-input:focus {
    border-color: var(--color-primary);
}
.inb-reserve-error {
    font-size:  12px;
    color:      var(--color-primary-deep);
    text-align: center;
    min-height: 16px;
}
.inb-reserve-success {
    display:        none;
    text-align:     center;
    font-family:    var(--font-expressive);
    font-size:      17px;
    line-height:    1.5;
    color:          var(--color-primary);
    background:     var(--color-rose-whisper);
    border:         1.5px solid var(--color-blush-mid);
    border-radius:  var(--radius-lg);
    padding:        20px 24px;
}
.inb-reserve-success.show {
    display: block;
}

/* ── Discover More (latest posts + follow links) ─────────── */
.inb-discover {
    width:          100%;
    margin-top:     20px;
    padding-top:    16px; /* combined with margin-top above: supporting
                              text → latest-post section */
    border-top:     1px solid var(--color-blush-mid);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            40px; /* latest-post section → Follow Along */
}
.inb-latest-posts {
    width: 100%;
}
.inb-latest-heading {
    font-weight:    600;
    font-size:      11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          rgba(227,11,92,0.62);
    text-align:     center;
    margin-bottom:  20px; /* heading → post feed */
}
.inb-post-feed {
    display:        flex;
    flex-direction: column;
    gap:            16px; /* between post cards */
    width:          100%;
}
.inb-post-card {
    display:         flex;
    align-items:     center;
    gap:             14px;
    background:      var(--color-white);
    border:          1.5px solid var(--color-blush-mid);
    border-radius:   var(--radius-lg);
    padding:         14px 18px 14px 14px;
    text-decoration: none;
    transition:
        border-color 250ms var(--ease-standard),
        box-shadow   250ms var(--ease-standard),
        transform    250ms var(--ease-expressive);
}
.inb-post-card:hover {
    border-color: var(--color-primary);
    box-shadow:   var(--shadow-card-hover);
    transform:    translateY(-2px);
}
.inb-post-thumb {
    display:       block;
    width:         56px;
    height:        56px;
    border-radius: var(--radius-sm);
    object-fit:    cover;
    flex-shrink:   0;
    background:    var(--color-blush);
}
.inb-post-text {
    display:        flex;
    flex-direction: column;
    gap:            5px; /* category → title, so they never touch */
    text-align:     left;
    min-width:      0;
}
.inb-post-category {
    font-weight:    600;
    font-size:      10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          rgba(227,11,92,0.62);
}
.inb-post-title {
    font-family:   var(--font-expressive);
    font-size:     15px;
    color:         var(--color-text);
    line-height:   1.4;
    overflow-wrap: break-word;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.inb-follow {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            20px; /* "Follow Along" heading → icons */
}
.inb-follow-label {
    font-weight:    500;
    font-size:      11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color:          rgba(26,10,16,0.42);
}
.inb-follow-icons {
    display: flex;
    gap:     14px; /* equal spacing between every icon */
}
.inb-follow-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--color-blush);
    color:           var(--color-primary);
    transition:
        background 250ms var(--ease-standard),
        color      250ms var(--ease-standard),
        transform  250ms var(--ease-expressive);
}
.inb-follow-icon svg {
    width:  18px;
    height: 18px;
}
.inb-follow-icon:hover {
    background: var(--color-primary);
    color:      var(--color-white);
    transform:  translateY(-2px);
}

/* ── Confetti ────────────────────────────────────────────── */
#inb-confetti {
    position:       fixed;
    inset:          0;
    pointer-events: none;
    z-index:        9999;
    overflow:       hidden;
}
.inb-particle {
    position:      absolute;
    border-radius: 50%;
    animation:     particleFall linear forwards;
    will-change:   transform,opacity;
}
@keyframes particleFall {
    0%   { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); }
    100% { opacity:0; transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(0.4); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:600px) {
    #inb-root  { padding: var(--space-4) 18px var(--space-5); }
    .inb-btn-primary,
    .inb-btn-ghost { width:100%; max-width:340px; }
    .inb-hero-card { padding:40px 24px; }
}
@media (max-width:380px) {
    .inb-connector { flex-direction:column; gap:4px; }
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .inb-underline-path { stroke-dashoffset:0; }
    .inb-step.active    { animation:none; opacity:1; transform:none; }
    .inb-hero-card      { animation:none; opacity:1; transform:none; }
    .inb-hero-name      { opacity:1; transform:none; transition:none; }
}