:root {
    --page-bg: #f2f3f5;
    --paper: #ffffff;
    --shadow: rgba(0,0,0,.18);
    --tear-depth: 18px; /* height of the torn area */
    --tooth: 22px; /* spacing of “teeth” */
}

body {
    margin: 0;
    font-family: Nunito, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--page-bg);
    padding: 48px 16px;
    color: #111;
}

.paper {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
    font-family: Nunito;
    font-size: 14px;
    background: var(--paper);
    border-radius: 10px 10px 0 0;
    padding: 14px 14px calc(14px + var(--tear-depth));
    box-shadow: 0 18px 40px var(--shadow);
    position: relative;
    overflow: hidden; /* important: hides the pseudo-element overflow */
    list-style: circle
}

    /* “Torn” bottom edge approximation */
    .paper::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--tear-depth);
        /*
        Layered gradients:
        - First layer creates repeating semicircle “bites” (page background showing through)
        - Second layer adds a subtle shadow/edge to sell the tear
      */
        background:
        /* bites: show the page background through the paper */
        radial-gradient(circle at calc(var(--tooth) / 2) 0, transparent 0 10px, var(--page-bg) 10px 12px, transparent 12px) 0 0 / var(--tooth) 100% repeat-x,
        /* edge shading */
        linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,0) 70%);
        /* Blend so the shading sits nicely */
        mix-blend-mode: normal;
        pointer-events: none;
    }

h1 {
    margin: 0 0 12px 0;
    font-size: 22px;
    letter-spacing: .2px;
}

p {
    margin: 0 0 12px 0;
    line-height: 1.55;
}

:root {
    --bg: #f4f6f8;
    --card: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --shadow: 0 18px 40px rgba(0,0,0,.12);
    --btn-h: 44px;
    --radius: 12px;
    --focus: 0 0 0 4px rgba(59,130,246,.18);
}

* {
    box-sizing: border-box;
}


.wrap {
    max-width: 420px;
    margin: 0 auto;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 22px;
}

h1 {
    margin: 0 0 6px 0;
    font-size: 20px;
    letter-spacing: .2px;
}

.sub {
    margin: 0 0 18px 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
}

.btn-col {
    display: grid;
    gap: 10px;
}

/* Base button */
.auth-btn {
    height: var(--btn-h);
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr 40px; /* icon | label | spacer to keep label centered */
    align-items: center;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: #fff;
    color: #111;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .1px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

    .auth-btn:hover {
        background: #fafafa;
        border-color: #d1d5db;
    }

    .auth-btn:active {
        transform: translateY(1px);
    }

    .auth-btn:focus-visible {
        outline: none;
        box-shadow: var(--focus);
        border-color: #93c5fd;
    }

    .auth-btn .icon {
        width: 22px;
        height: 22px;
        margin-left: 14px;
        display: inline-block;
    }

    .auth-btn .label {
        text-align: center;
        padding: 0 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Brand variants (approximate “typical” look) */
.google {
    background: #fff;
    color: #111;
}

.apple {
    background: #000;
    border-color: #000;
    color: #fff;
}

    .apple:hover {
        background: #111;
        border-color: #111;
    }

.meta {
    background: #1877F2;
    border-color: #1877F2;
    color: #fff;
}

    .meta:hover {
        background: #166fe5;
        border-color: #166fe5;
    }

.microsoft {
    background: #fff;
    color: #111;
}

.x {
    background: #000;
    border-color: #000;
    color: #fff;
}

    .x:hover {
        background: #111;
        border-color: #111;
    }

/* Divider */
.divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin: 16px 0;
    color: var(--muted);
    font-size: 12px;
}

    .divider::before,
    .divider::after {
        content: "";
        height: 1px;
        background: var(--border);
    }

/* Optional: small note */
.note {
    margin: 14px 0 0 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
}

/* SVG icons inherit currentColor unless overridden */
.icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

ul {
    list-style: disc;
}
    ul li {
        margin-left: 22px;
    }

.strike {
    text-decoration: line-through;
}

.substantiation {
   margin-top: 24px;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
}


.substantiation__col {
   padding: 16px;
   border: 1px solid rgba(0, 0, 0, 0.10);
   border-radius: 12px;
   background: color-mix(in srgb, white 85%, var(--accent) 15%);
   background: rgba(255, 255, 255, 0.70);
   backdrop-filter: blur(6px);
   box-shadow: var(--shadow);
   color: #111;
}

.substantiation__col {
   position: relative;
   padding-top: 16px; /* keep as-is */
}

.substantiation__col::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: #1F8F7C;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
}

.substantiation__col h3 {
   margin: 0 0 8px 0;
   font-size: 16px;
   line-height: 1.2;
   color: #1F8F7C ;
}

.substantiation__col p {
   margin: 0 0 10px 0;
   font-size: 14px;
   line-height: 1.45;
   opacity: 0.9;
}

.substantiation__col ul {
   margin: 0;
   padding-left: 18px;
}

.substantiation__col li {
   margin: 6px 0;
   font-size: 14px;
   line-height: 1.35;
}

@media (max-width: 980px) {
   .substantiation {
      grid-template-columns: 1fr;
   }
}