/* Bespoke pieces from the old start page that are not design-system chrome:
   the PDF download modal, the notify form, the calculator preview mock and
   the 3D book graphic. Carried over verbatim during the migration rather than
   rebuilt, because they are functional and page-specific.

   Section styling, typography and layout come from css/site.css and
   css/start-page.css. Do not add general chrome here. */

.calc-preview{background: white;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            border: 2px solid #e5e7eb;
            position: relative;}
.calc-preview-header{display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #f3f4f6;}
.calc-preview-header .dot{width: 10px;
            height: 10px;
            border-radius: 50%;}
.calc-preview-header .dot:nth-child(1){background: #ef4444;}
.calc-preview-header .dot:nth-child(2){background: #fbbf24;}
.calc-preview-header .dot:nth-child(3){background: #10b981;}
.calc-preview-header span{font-size: 0.8rem;
            color: #9ca3af;
            margin-left: 8px;}
.preview-price{text-align: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 14px;
            padding: 1.5rem;
            margin-bottom: 1.25rem;}
.preview-price-label{font-size: 0.75rem;
            color: rgba(255,255,255,0.7);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;}
.preview-price-value{font-size: 3rem;
            font-weight: 800;
            color: white;}
.preview-rows{display: flex;
            flex-direction: column;
            gap: 0.5rem;}
.preview-row{display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            border-bottom: 1px solid #f3f4f6;
            font-size: 0.85rem;}
.preview-row span:first-child{color: #9ca3af;}
.preview-row span:last-child{color: #1f2937; font-weight: 600;}
.preview-revenue{background: #f0fdf4;
            border: 2px solid #bbf7d0;
            border-radius: 10px;
            padding: 0.75rem 1rem;
            margin-top: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;}
.preview-revenue span:first-child{font-size: 0.82rem; color: #166534;}
.preview-revenue span:last-child{font-size: 1.1rem; font-weight: 800; color: #166534;}
.preview-badge{position: absolute;
            top: -10px;
            right: 20px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;}
.book-3d{perspective: 800px;
            width: 250px;
            flex-shrink: 0;
            position: relative;
            transform-style: preserve-3d;}
.book-pages{position: absolute;
            top: 5px;
            left: 10px;
            right: 2px;
            bottom: 5px;
            transform: rotateY(-15deg);
            transform-origin: left center;
            z-index: 0;
            border-radius: 0 2px 2px 0;
            background: linear-gradient(to right,
                #d5d0c8 0px,
                #eae7e1 1px,
                #f2efea 3px,
                #eae7e1 5px,
                #f5f3ef 7px
            );
            box-shadow:
                2px 2px 6px rgba(0,0,0,0.1),
                1px 1px 2px rgba(0,0,0,0.06);}
.book-pages::before{content: '';
            position: absolute;
            inset: 8px 2px 8px 4px;
            background-image: repeating-linear-gradient(
                to bottom,
                rgba(0,0,0,0.06) 0px,
                rgba(0,0,0,0.06) 0.5px,
                transparent 0.5px,
                transparent 1.5px,
                rgba(0,0,0,0.04) 1.5px,
                rgba(0,0,0,0.04) 2px,
                transparent 2px,
                transparent 3.5px
            );
            border-radius: 0 2px 2px 0;}
.book-pages-bottom{position: absolute;
            left: 16px;
            right: 10px;
            bottom: -4px;
            height: 7px;
            transform: rotateY(-15deg) rotateX(8deg);
            transform-origin: left top;
            z-index: 0;
            border-radius: 0 0 2px 2px;
            background: linear-gradient(to bottom,
                #d5d0c8 0px,
                #eae7e1 1px,
                #f2efea 3px,
                #f5f3ef 6px
            );
            box-shadow: 1px 3px 6px rgba(0,0,0,0.08);}
.book-cover{width: 240px;
            height: 340px;
            background: #0a0f1c;
            border-radius: 4px 16px 16px 4px;
            position: relative;
            transform: rotateY(-15deg);
            transform-origin: left center;
            transform-style: preserve-3d;
            box-shadow:
                -4px 6px 15px rgba(0,0,0,0.3),
                10px 15px 40px rgba(0,0,0,0.25),
                inset 2px 0 4px rgba(255,255,255,0.05);
            padding: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 2;}
.book-cover::before{content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 8px;
            height: 100%;
            background: linear-gradient(to right,
                rgba(0,0,0,0.5) 0%,
                rgba(0,0,0,0.2) 40%,
                rgba(255,255,255,0.05) 100%
            );
            z-index: 10;}
.book-cover::after{content: '';
            position: absolute;
            top: -20%;
            right: -30%;
            width: 80%;
            height: 70%;
            background: radial-gradient(ellipse, rgba(41, 98, 255, 0.2) 0%, transparent 70%);
            z-index: 1;
            pointer-events: none;}
.book-3d::after{content: '';
            position: absolute;
            bottom: -18px;
            left: 20px;
            right: 10px;
            height: 20px;
            background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, transparent 70%);
            filter: blur(6px);
            z-index: -1;
            transform: rotateY(-15deg);}
.pdf-modal-overlay{display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 2rem;}
.pdf-modal-overlay.show{display: flex;}
.pdf-modal{background: white;
            border-radius: 20px;
            padding: 2.5rem;
            max-width: 440px;
            width: 100%;
            text-align: center;
            position: relative;
            animation: fadeInUp 0.3s ease;}
.pdf-modal-close{position: absolute;
            top: 14px;
            right: 14px;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #9ca3af;
            cursor: pointer;
            padding: 4px;
            line-height: 1;}
.pdf-modal h3{font-size: 1.2rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 0.5rem;}
.pdf-modal p{font-size: 0.9rem;
            color: #6b7280;
            margin-bottom: 1.25rem;
            line-height: 1.5;}
.pdf-modal input[type="email"]{width: 100%;
            padding: 0.85rem 1rem;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 1rem;
            color: #1f2937;
            margin-bottom: 0.75rem;
            box-sizing: border-box;
            transition: border-color 0.2s ease;}
.pdf-modal input[type="email"]:focus{outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);}
.pdf-modal .consent-row{display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            text-align: left;
            margin-bottom: 1rem;}
.pdf-modal .consent-row input[type="checkbox"]{margin-top: 3px;
            accent-color: #667eea;
            width: 18px;
            height: 18px;
            flex-shrink: 0;}
.pdf-modal .consent-row label{font-size: 0.78rem;
            color: #6b7280;
            line-height: 1.4;
            cursor: pointer;}
.pdf-modal button[type="submit"]{width: 100%;
            padding: 0.85rem 1.5rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 14px rgba(102, 126, 234, 0.3);}
.pdf-modal button[type="submit"]:hover{transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);}
.pdf-modal-success{display: none;}
.pdf-modal-success.show{display: block;}
.pdf-modal-success .tick{width: 56px;
            height: 56px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;}
.pdf-modal-success .tick svg{width: 28px;
            height: 28px;
            fill: white;}
.notify-form{flex-wrap: wrap;}
.notify-form input{min-width: 0; flex: 1 1 140px;}
.notify-form{display: flex;
            gap: 0.5rem;}
.notify-form input[type="email"]{flex: 1;
            padding: 0.6rem 0.75rem;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 0.82rem;
            color: #1f2937;
            min-width: 0;
            box-sizing: border-box;
            transition: border-color 0.2s ease;}
.notify-form input[type="email"]:focus{outline: none;
            border-color: #667eea;}
.notify-form button{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-size: 0.82rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s ease;}
.notify-form button:hover{transform: translateY(-1px);}
.notify-success{display: none;
            font-size: 0.82rem;
            color: #059669;
            font-weight: 600;}
.notify-success.show{display: block;}
@media (max-width: 768px){
  .calc-preview{order: -1;}
  .book-3d{margin: 0 auto;
                width: 210px;}
  .book-cover{width: 200px;
                height: 280px;}
  .book-pages{right: 4px;
                top: 4px;
                bottom: 4px;}
  .book-pages-bottom{height: 5px;
                bottom: -3px;
                right: 12px;}
}
@keyframes fadeInUp{from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }}