/* Bond Shared — Variables, Keyframes, Resets, Overlays */
    * { margin:0; padding:0; box-sizing:border-box; }
    html { font-size:16px; -webkit-text-size-adjust:100%; }
    body {
      font-family:'Space Grotesk',sans-serif;
      background:#0f0c08;
      background-image:
        radial-gradient(ellipse at 50% 0%, rgba(180,140,80,0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(140,100,50,0.03) 0%, transparent 40%),
        linear-gradient(180deg, #0f0c08 0%, #141210 40%, #1a1714 100%);
      min-height:100vh; color:#f1f5f9; overflow-x:hidden; padding-bottom:20px;
      transition:background 0.5s ease;
    }
    body.cork-mode {
      background:#b5b0a6;
      background-image:none;
    }
    body.cork-mode::before, body.cork-mode::after { display:none; }
    :root {
      --bond-gold:#fbbf24; --bond-gold-light:#fcd34d;
      --bond-gold-glow:rgba(251,191,36,0.25); --bond-warm:#f59e0b;
      --bond-bg:#0a0e17;
      --bond-surface:linear-gradient(135deg, rgba(30,41,59,0.9), rgba(15,23,42,0.95));
      --bond-surface-flat:rgba(30,41,59,0.6);
      --bond-border:rgba(251,191,36,0.12);
      --bond-text:#f1f5f9; --bond-muted:#94a3b8; --bond-subtle:#64748b;
      --desk-wood:rgba(251,191,36,0.06);
      /* Emtrace teal personal seal palette */
      --bond-seal-teal:#109eb7;
      --bond-seal-teal-light:#5eead4;
      --bond-seal-teal-mid:#14b8a6;
      --bond-seal-teal-deep:#0e6e7e;
      --bond-seal-glow:rgba(16,158,183,0.35);
    }

    /* ═══════════════════════════════════════════
       KEYFRAMES
       ═══════════════════════════════════════════ */
    @keyframes fadeSlideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
    @keyframes homeReveal { from{opacity:0} to{opacity:1} }
    @keyframes pushpinSwing {
      0%   { transform:rotate(calc(var(--pin-rest,0deg) + 6deg)); }
      18%  { transform:rotate(calc(var(--pin-rest,0deg) - 4.5deg)); }
      34%  { transform:rotate(calc(var(--pin-rest,0deg) + 3deg)); }
      50%  { transform:rotate(calc(var(--pin-rest,0deg) - 2deg)); }
      66%  { transform:rotate(calc(var(--pin-rest,0deg) + 1deg)); }
      80%  { transform:rotate(calc(var(--pin-rest,0deg) - 0.4deg)); }
      100% { transform:rotate(var(--pin-rest,0deg)); }
    }
    @keyframes pushpinNudge {
      0%   { transform:rotate(calc(var(--pin-rest,0deg) + 2.5deg)); }
      30%  { transform:rotate(calc(var(--pin-rest,0deg) - 1.8deg)); }
      55%  { transform:rotate(calc(var(--pin-rest,0deg) + 0.8deg)); }
      100% { transform:rotate(var(--pin-rest,0deg)); }
    }
    .home-stagger { opacity:1; }
    .cork-pinned {
      transform-origin:top center;
    }
    .cork-pinned.swing-in {
      animation:pushpinSwing 1.3s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    }
    .cork-pinned:hover {
      animation:pushpinNudge 0.5s ease-out forwards;
    }
    @keyframes corkBreeze {
      0%   { transform:rotate(var(--pin-rest,0deg)); }
      25%  { transform:rotate(calc(var(--pin-rest,0deg) + 0.4deg)); }
      50%  { transform:rotate(calc(var(--pin-rest,0deg) - 0.2deg)); }
      75%  { transform:rotate(calc(var(--pin-rest,0deg) + 0.1deg)); }
      100% { transform:rotate(var(--pin-rest,0deg)); }
    }
    .cork-pinned.breeze {
      animation:corkBreeze 2.5s ease-in-out forwards;
    }
    @keyframes glowPulse { 0%,100%{box-shadow:0 0 8px rgba(251,191,36,0.2)} 50%{box-shadow:0 0 20px rgba(251,191,36,0.4)} }
    @keyframes breathe { 0%,100%{transform:scale(1);opacity:0.7} 50%{transform:scale(1.15);opacity:1} }
    @keyframes presenceGlow { 0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0)} 50%{box-shadow:0 0 20px 4px rgba(251,191,36,0.12)} }
    @keyframes modalIn { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
    @keyframes warmSweep { 0%,100%{opacity:0.3;transform:translateX(-100%)} 50%{opacity:0.6;transform:translateX(100%)} }
    @keyframes ringExpand { 0%{transform:scale(0.8);opacity:0.4} 100%{transform:scale(1.5);opacity:0} }
    @keyframes orbitRotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
    @keyframes accentPulse { 0%,100%{opacity:0.5;width:60px} 50%{opacity:1;width:100px} }
    @keyframes fabPulse { 0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0.4)} 50%{box-shadow:0 0 0 12px rgba(251,191,36,0)} }
    @keyframes canvasSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
    @keyframes canvasSlideDown { from{transform:translateY(0)} to{transform:translateY(100%)} }
    @keyframes candleFlicker { 0%,100%{opacity:0.3;transform:scale(1)} 25%{opacity:0.45;transform:scale(1.02)} 50%{opacity:0.35;transform:scale(0.98)} 75%{opacity:0.5;transform:scale(1.01)} }
    @keyframes envelopeHover { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-3px) rotate(0.5deg)} }
    @keyframes stampPress { from{transform:scale(1.3) rotate(-5deg);opacity:0} to{transform:scale(1) rotate(0deg);opacity:1} }
    @keyframes celebrateIn { from{opacity:0;transform:scale(0.7)} to{opacity:1;transform:scale(1)} }
    @keyframes entryBlurReveal { from{opacity:0;filter:blur(8px);transform:translateY(12px)} to{opacity:1;filter:blur(0);transform:translateY(0)} }
    @keyframes vizRingPulse { 0%,100%{opacity:0.15;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.08)} }
    @keyframes penWriting { 0%,100%{transform:translateX(0) rotate(-2deg)} 25%{transform:translateX(3px) rotate(1deg)} 50%{transform:translateX(-2px) rotate(-1deg)} 75%{transform:translateX(4px) rotate(2deg)} }
    @keyframes letterSlideOut { 0%{transform:translateY(60%) scale(0.9);opacity:0} 60%{transform:translateY(-5%) scale(1.02);opacity:1} 100%{transform:translateY(0) scale(1);opacity:1} }
    @keyframes sealBreak { 0%{transform:translate(-50%,-50%) scale(1);opacity:1} 20%{transform:translate(-50%,-50%) scale(1.2);opacity:1} 40%{transform:translate(-50%,-50%) scale(1.35);opacity:1;filter:brightness(1.4)} 100%{transform:translate(-50%,-50%) scale(0.6);opacity:0;filter:brightness(2)} }
    @keyframes envelopeOpen { 0%{transform:rotateX(0deg)} 100%{transform:rotateX(-180deg)} }
    @keyframes ceremonyEnvelopeIn { 0%{transform:translateY(80px) scale(0.85) rotate(-2deg);opacity:0} 60%{transform:translateY(-8px) scale(1.02) rotate(0.5deg);opacity:1} 100%{transform:translateY(0) scale(1) rotate(0deg);opacity:1} }
    @keyframes ceremonySealGlow { 0%{box-shadow:0 2px 10px rgba(140,30,20,0.4)} 50%{box-shadow:0 2px 10px rgba(140,30,20,0.4),0 0 30px rgba(196,68,58,0.6),0 0 60px rgba(196,68,58,0.3)} 100%{box-shadow:0 2px 10px rgba(140,30,20,0.4)} }
    @keyframes sealParticle { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{opacity:0} }
    @keyframes ceremonyFadeIn { 0%{opacity:0} 100%{opacity:1} }
    @keyframes ceremonyLetterGlow { 0%{box-shadow:0 4px 20px rgba(0,0,0,0.3)} 100%{box-shadow:0 8px 40px rgba(251,191,36,0.2),0 4px 20px rgba(0,0,0,0.3)} }
    @keyframes promptFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
    @keyframes paperLift { from{transform:translateY(0) scale(1) rotate(0deg);opacity:1} to{transform:translateY(-30px) scale(1.04) rotate(-0.5deg);opacity:0.8} }
    @keyframes inkFlow {
      0%   { opacity:0.3; filter:blur(0.8px); transform:scaleX(0.97); }
      40%  { opacity:0.85; filter:blur(0.2px); transform:scaleX(1.0); }
      100% { opacity:1; filter:blur(0); transform:scaleX(1); }
    }
    @keyframes deskLampGlow { 0%,100%{opacity:0.6} 50%{opacity:0.85} }
    @keyframes inkBlotSpread { 0%{transform:scale(0);opacity:1} 50%{transform:scale(1.5);opacity:0.5} 100%{transform:scale(2);opacity:0} }

    @keyframes paperSwitch {
      0%   { opacity:1; transform:perspective(900px) rotateX(1.5deg) rotate(-0.4deg); }
      30%  { opacity:0; transform:perspective(900px) rotateX(3deg) rotate(-1.2deg) translateY(-14px); }
      31%  { opacity:0; transform:perspective(900px) rotateX(0deg) rotate(0.3deg) translateY(14px); }
      100% { opacity:1; transform:perspective(900px) rotateX(1.5deg) rotate(-0.4deg); }
    }
    .canvas-paper-sheet.switching { animation:paperSwitch 0.45s ease-in-out; }
    @keyframes envelopeAppear {
      0%   { opacity:0; transform:scale(0.9); }
      100% { opacity:1; transform:scale(1); }
    }
    @keyframes envelopeFly {
      0%   { transform:translateY(0) scale(1) rotate(0deg); opacity:1; }
      40%  { transform:translateY(-20px) scale(1.02) rotate(-1deg); opacity:1; }
      100% { transform:translateY(-200px) scale(0.6) rotate(-3deg); opacity:0; }
    }
    .send-ceremony-overlay {
      position:fixed; inset:0; z-index:200;
      display:flex; align-items:center; justify-content:center; flex-direction:column;
      background:rgba(10,8,5,0.95); backdrop-filter:blur(20px);
    }
    .send-envelope {
      width:280px; height:180px; border-radius:6px; position:relative;
      background:linear-gradient(165deg, #f5f0e8 0%, #ebe1d4 100%);
      box-shadow:0 12px 40px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.2);
    }
    .send-envelope-flap {
      position:absolute; top:0; left:0; right:0; height:50%;
      background:linear-gradient(180deg, #ebe1d4, #ddd4c4);
      clip-path:polygon(0 0, 100% 0, 50% 100%);
      z-index:1;
    }
    .send-envelope-seal {
      position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); z-index:2;
      width:40px; height:40px; border-radius:50%;
      background:radial-gradient(circle at 35% 35%, #d4524a, #c4443a 40%, #8b2520);
      box-shadow:0 2px 8px rgba(140,30,20,0.35);
      display:flex; align-items:center; justify-content:center;
    }
    .send-envelope-seal svg { width:16px; height:16px; stroke:rgba(255,255,255,0.5); fill:none; }
    .send-envelope-label {
      font-family:'Cormorant Garamond',serif; font-size:0.95rem; font-style:italic;
      color:rgba(220,200,170,0.6); text-align:center; margin-top:16px;
    }
    .send-status-text {
      font-family:'Cormorant Garamond',serif; font-size:0.85rem; font-style:italic;
      color:rgba(212,175,100,0.5); letter-spacing:0.08em; margin-top:24px;
    }


    /* ═══════════════════════════════════════════
       CONVERGENCE CELEBRATION
       ═══════════════════════════════════════════ */
    .celebration-overlay {
      display:none; position:fixed; inset:0; z-index:300;
      background:rgba(0,0,0,0.5); backdrop-filter:blur(24px);
      align-items:center; justify-content:center;
    }
    .celebration-overlay.active { display:flex; }
    .celebration-card {
      background:linear-gradient(135deg, rgba(30,41,59,0.98), rgba(15,23,42,0.95));
      border:1px solid rgba(251,191,36,0.3); border-radius:24px;
      padding:48px 36px; text-align:center; max-width:360px; width:90%;
      animation:celebrateIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
      position:relative; overflow:hidden;
      box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(251,191,36,0.08);
    }
    .celebration-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--bond-gold), #fbbf24, var(--bond-gold), transparent); }
    .celebration-icon { font-size:3rem; margin-bottom:20px; }
    .celebration-title {
      font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600;
      background:linear-gradient(135deg, #fbbf24, #fcd34d, #fbbf24);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      margin-bottom:10px;
    }
    .celebration-text { color:var(--bond-muted); font-size:0.95rem; line-height:1.6; font-family:'Cormorant Garamond',serif; font-style:italic; }

    /* ═══════════════════════════════════════════
       KEPT / RHYTHM / MODAL / TOAST
       ═══════════════════════════════════════════ */
    .sent-header { padding:24px 0 16px; text-align:center; }
    .sent-header h2 { font-family:'Cormorant Garamond',serif; color:var(--bond-gold); font-size:1.5rem; font-weight:400; margin-bottom:4px; }
    .sent-header p { color:var(--bond-muted); font-size:0.85rem; }
    .sent-letter-card {
      background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
      border-radius:14px; padding:16px 18px; margin-bottom:12px;
      transition:all 0.2s;
    }
    .sent-letter-card:hover { border-color:rgba(212,165,116,0.15); }
    .sent-letter-to {
      font-family:'Space Grotesk',sans-serif; font-size:0.62rem; font-weight:600;
      color:rgba(139,92,246,0.6); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:6px;
    }
    .sent-letter-text {
      font-family:'Cormorant Garamond',serif; font-size:1rem; color:rgba(255,248,235,0.8);
      line-height:1.5; margin-bottom:8px; white-space:pre-wrap;
    }
    .sent-letter-meta {
      font-family:'Space Grotesk',sans-serif; font-size:0.6rem; color:var(--bond-muted);
      display:flex; gap:12px; align-items:center;
    }
    .sent-letter-seal {
      display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.58rem;
      background:rgba(196,68,58,0.12); color:rgba(196,68,58,0.7); border:1px solid rgba(196,68,58,0.15);
    }
    .sent-letter-actions {
      display:flex; gap:8px; margin-top:10px; justify-content:flex-end;
    }
    .sent-action-btn {
      background:none; border:1px solid rgba(255,255,255,0.08); border-radius:8px;
      padding:5px 12px; font-size:0.65rem; font-family:'Space Grotesk',sans-serif;
      cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:4px;
    }
    .sent-action-btn.keep { color:rgba(212,165,116,0.7); border-color:rgba(212,165,116,0.15); }
    .sent-action-btn.keep:hover { background:rgba(212,165,116,0.08); color:var(--bond-gold); }
    .sent-action-btn.keep.kept { color:var(--bond-gold); border-color:rgba(212,165,116,0.3); background:rgba(212,165,116,0.08); pointer-events:none; }
    .sent-action-btn.delete { color:rgba(220,80,60,0.5); border-color:rgba(220,80,60,0.1); }
    .sent-action-btn.delete:hover { background:rgba(220,80,60,0.08); color:rgba(220,80,60,0.8); }
    .sent-action-btn svg { width:12px; height:12px; }
    .kept-header { padding:24px 0 16px; text-align:center; }
    .kept-header h2 { font-family:'Cormorant Garamond',serif; color:var(--bond-gold); font-size:1.5rem; font-weight:400; margin-bottom:4px; }
    .kept-header p { color:var(--bond-muted); font-size:0.85rem; }
    .kept-filters { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; justify-content:center; }
    .kept-filter-btn { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:6px 14px; font-size:0.78rem; color:var(--bond-muted); cursor:pointer; font-family:inherit; }
    .kept-filter-btn.active { background:rgba(212,165,116,0.12); border-color:var(--bond-gold); color:var(--bond-gold); }
    .kept-list { display:grid; grid-template-columns:1fr; gap:14px; }
    .kept-card { background:var(--bond-surface); backdrop-filter:blur(12px); border:1px solid var(--bond-border); border-radius:18px; padding:20px 24px; transition:all 0.3s; position:relative; overflow:hidden; }
    .kept-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(212,165,116,0.15), transparent); }
    .kept-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.15); }
    .kept-card-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
    .kept-card-date { color:var(--bond-subtle); font-size:0.7rem; }
    .kept-card-from { color:var(--bond-gold); font-size:0.72rem; font-weight:600; }
    .kept-card-text { color:var(--bond-text); font-size:0.95rem; line-height:1.7; font-family:'Cormorant Garamond',serif; }
    .kept-card-photo { max-width:100%; border-radius:12px; margin-top:10px; }
    .kept-card-actions { display:flex; gap:8px; margin-top:12px; }
    .kept-action-btn { background:rgba(212,165,116,0.06); border:1px solid rgba(212,165,116,0.12); border-radius:8px; padding:5px 12px; font-size:0.72rem; color:var(--bond-gold-light); cursor:pointer; font-family:inherit; }

    .rhythm-header { padding:24px 0 16px; text-align:center; }
    .rhythm-header h2 { color:var(--bond-gold); font-size:1.3rem; font-weight:600; margin-bottom:4px; }
    .rhythm-header p { color:var(--bond-muted); font-size:0.85rem; }
    .rhythm-score-ring { width:130px; height:130px; margin:20px auto; position:relative; }
    .rhythm-score-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
    .rhythm-score-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
    .rhythm-score-num { color:var(--bond-gold); font-size:1.8rem; font-weight:700; }
    .rhythm-score-sub { color:var(--bond-muted); font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; }
    .rhythm-factors { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0; }
    .rhythm-factor { background:var(--bond-surface); backdrop-filter:blur(12px); border:1px solid var(--bond-border); border-radius:14px; padding:14px 16px; position:relative; overflow:hidden; }
    .rhythm-factor::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(212,165,116,0.15), transparent); }
    .rhythm-factor-label { color:var(--bond-muted); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px; }
    .rhythm-factor-bar { height:4px; border-radius:2px; background:rgba(255,255,255,0.06); margin-top:6px; }
    .rhythm-factor-fill { height:100%; border-radius:2px; background:linear-gradient(90deg, var(--bond-gold), #fbbf24); transition:width 0.8s ease; }
    .rhythm-insights { display:flex; flex-direction:column; gap:10px; margin:20px 0; }
    .rhythm-insight-card { background:var(--bond-surface-flat); backdrop-filter:blur(12px); border-left:3px solid var(--bond-gold); border-radius:0 14px 14px 0; padding:14px 18px; }
    .rhythm-insight-title { color:var(--bond-text); font-size:0.85rem; font-weight:600; margin-bottom:3px; }
    .rhythm-insight-text { color:var(--bond-muted); font-size:0.82rem; line-height:1.5; }
    .rhythm-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin:16px 0; }
    .rhythm-stat { background:var(--bond-surface); backdrop-filter:blur(12px); border:1px solid var(--bond-border); border-radius:14px; padding:14px; text-align:center; position:relative; overflow:hidden; }
    .rhythm-stat::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(212,165,116,0.15), transparent); }
    .rhythm-stat-num { color:var(--bond-gold); font-size:1.4rem; font-weight:700; }
    .rhythm-stat-label { color:var(--bond-muted); font-size:0.65rem; text-transform:uppercase; letter-spacing:0.06em; margin-top:2px; }

    .bond-modal-overlay { display:none; position:fixed; inset:0; z-index:200; background:rgba(10,14,23,0.75); backdrop-filter:blur(10px); align-items:center; justify-content:center; }
    .bond-modal-overlay.open { display:flex; }
    .bond-modal { background:linear-gradient(135deg, rgba(30,41,59,0.98), rgba(15,23,42,0.95)); border:1px solid rgba(251,191,36,0.15); border-radius:16px; padding:28px 24px; width:90%; max-width:400px; animation:modalIn 0.25s ease-out; position:relative; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
    .bond-modal::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, rgba(251,191,36,0.4), transparent); }
    .bond-modal h3 { color:#fbbf24; font-size:1.1rem; font-weight:600; margin-bottom:16px; }
    .bond-modal input { width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:12px 16px; color:#f1f5f9; font-family:inherit; font-size:0.9rem; outline:none; margin-bottom:12px; }
    .bond-modal input:focus { border-color:rgba(251,191,36,0.3); }
    .bond-modal-actions { display:flex; gap:10px; justify-content:flex-end; }
    .bond-modal-btn { background:rgba(251,191,36,0.12); border:1px solid rgba(251,191,36,0.2); border-radius:12px; padding:10px 22px; color:#fbbf24; font-family:inherit; font-size:0.85rem; font-weight:600; cursor:pointer; }
    .bond-modal-btn.cancel { background:transparent; border-color:rgba(255,255,255,0.1); color:#94a3b8; }
    .bond-toast { position:fixed; bottom:140px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg, rgba(30,41,59,0.95), rgba(15,23,42,0.95)); border:1px solid rgba(251,191,36,0.15); backdrop-filter:blur(12px); padding:10px 24px; border-radius:50px; color:#f1f5f9; font-size:0.82rem; z-index:9999; opacity:0; transition:all 0.3s; pointer-events:none; box-shadow:0 4px 20px rgba(0,0,0,0.3); }
    .bond-toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); }
    .shared-presence { text-align:center; padding:6px 0; color:rgba(212,165,116,0.5); font-size:0.72rem; font-style:italic; font-family:'Cormorant Garamond',serif; animation:breathe 4s ease-in-out infinite; }

    @media (max-width:600px) {
      .bond-hero img { width:170px; height:170px; }
      .bond-hero-tagline { font-size:1.6rem; white-space:normal; text-align:center; }
      .today-date { font-size:1.35rem; }
      .desk-notepad { max-width:100%; transform:rotate(-1.5deg); }
      .partner-card { max-width:100% !important; }
      .home-notif-banner { max-width:100%; }
      .reflection-ritual { max-width:100%; }
      .priority-card:nth-child(odd) { max-width:100% !important; }
      .priority-card:nth-child(even) { max-width:100% !important; }
      .convergence-home-card { max-width:100%; }
      .moments-item:nth-child(odd) { max-width:100% !important; }
      .moments-item:nth-child(even) { max-width:100% !important; }
      .your-circle-card { max-width:100%; }
      .letter-full-page { padding:24px 20px 32px; }
      .canvas-paper-sheet {
        width:88%; max-width:380px; min-height:400px;
        padding:32px 28px 32px 40px;
        transform:perspective(900px) rotateX(1.2deg) rotate(-0.3deg);
      }
    }