#mct-page{--plum:#5c3148;--pink:#ad427a;--rose:#faedf3;--cream:#fffaf7;--ink:#332a34;--muted:#736b73;--line:#e9dfe5;--green:#226e62;--shadow:0 18px 55px #4f2b4112}
#mct-page *{box-sizing:border-box}
#mct-page{margin:0;background:var(--cream);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.55}
#mct-page button, #mct-page input, #mct-page select, #mct-page textarea{font:inherit}
#mct-page button{cursor:pointer}
#mct-page button:focus-visible, #mct-page input:focus-visible, #mct-page select:focus-visible, #mct-page textarea:focus-visible{outline:3px solid #d881aa;outline-offset:2px}
#mct-page h1, #mct-page h2, #mct-page h3{font-family:Georgia,serif;line-height:1.16;color:var(--plum)}
#mct-page h1{font-size:clamp(2.4rem,5vw,4.4rem);margin:.25em 0}
#mct-page h2{font-size:clamp(1.6rem,3vw,2.25rem);margin:0 0 .7rem}
#mct-page h3{font-size:1.25rem;margin:.25rem 0}
#mct-page .wrap{max-width:none;width:100%;margin:auto;padding:0 clamp(16px,3vw,60px)}
#mct-page .top{background:var(--plum);color:white;font-size:.83rem;padding:9px 0}
#mct-page .nav{background:white;border-bottom:1px solid var(--line)}
#mct-page .nav .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:17px;padding-bottom:17px;gap:20px}
#mct-page .brand{font-family:Georgia,serif;font-weight:bold;color:var(--plum);font-size:1.25rem}
#mct-page .brand small{display:block;font:600 .63rem system-ui;letter-spacing:.18em;color:var(--pink)}
#mct-page .pill{border:1px solid var(--line);padding:7px 13px;border-radius:30px;color:var(--muted);font-size:.82rem}
#mct-page .hero{padding:45px 0 35px;background:radial-gradient(circle at 90% 15%,#f9dce9 0,transparent 40%)}
#mct-page .eyebrow{text-transform:uppercase;letter-spacing:.19em;color:var(--pink);font-size:.75rem;font-weight:800}
#mct-page .hero p{max-width:710px;color:var(--muted);font-size:1.08rem}
#mct-page .step{margin:25px 0 45px}
#mct-page .card{background:white;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:27px}
#mct-page .choices{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
#mct-page .choice{border:2px solid var(--line);background:white;border-radius:17px;padding:22px;text-align:left;min-height:180px}
#mct-page .choice strong{display:block;color:var(--plum);font-size:1.15rem;margin-bottom:9px}
#mct-page .choice span{display:block;color:var(--muted);font-size:.92rem}
#mct-page .choice.active{border-color:var(--pink);background:#fff5f9}
#mct-page .btn{background:var(--pink);color:white;border:1px solid var(--pink);padding:12px 19px;border-radius:10px;font-weight:700}
#mct-page .btn.secondary{background:white;color:var(--plum);border-color:#cdb7c3}
#mct-page .btn.ghost{background:transparent;color:var(--pink);border-color:transparent}
#mct-page .btn:disabled{opacity:.45;cursor:not-allowed}
#mct-page .notice{border-left:4px solid var(--pink);background:var(--rose);padding:13px 17px;border-radius:8px;font-size:.92rem}
#mct-page .muted{color:var(--muted)}
#mct-page .tiny{font-size:.8rem}
#mct-page .hidden{display:none!important}
#mct-page .section{padding:24px 0}
#mct-page .toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:20px}
#mct-page .actions{display:flex;gap:9px;flex-wrap:wrap}
#mct-page .layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:22px}
#mct-page .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#mct-page .field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
#mct-page .field label{font-weight:700;font-size:.85rem}
#mct-page .field input, #mct-page .field select, #mct-page .field textarea{width:100%;border:1px solid #d8cad3;border-radius:10px;padding:11px 12px;background:#fff;color:var(--ink)}
#mct-page .field textarea{min-height:70px;resize:vertical}
#mct-page .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
#mct-page .stat{background:#fff8fb;border:1px solid #f1dfeb;padding:15px;border-radius:12px}
#mct-page .stat b{display:block;font-size:1.3rem;color:var(--plum)}
#mct-page .stat span{font-size:.77rem;color:var(--muted)}
#mct-page .calendar-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 15px}
#mct-page .cal-title{font-family:Georgia,serif;font-size:1.45rem;font-weight:700;color:var(--plum)}
#mct-page .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
#mct-page .weekday{text-align:center;color:var(--muted);font-size:.78rem;font-weight:700;padding:8px 0}
#mct-page .day{min-height:66px;border:1px solid #eee4e9;background:#fff;border-radius:10px;text-align:left;padding:8px;position:relative;color:var(--ink)}
#mct-page .day:disabled{opacity:.3;cursor:default}
#mct-page .day.period{background:#f6d6e5;border-color:#e6a6c5}
#mct-page .day.predicted{background:#eee8fa;border-color:#d4c4eb}
#mct-page .day.today{outline:2px solid var(--pink)}
#mct-page .day .dot{display:block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-top:8px}
#mct-page .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:.8rem;color:var(--muted)}
#mct-page .key{width:11px;height:11px;display:inline-block;border-radius:3px;margin-right:5px}
#mct-page .history{display:grid;gap:10px}
#mct-page .entry{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid var(--line);border-radius:12px;padding:12px 15px}
#mct-page .entry strong{display:block;color:var(--plum)}
#mct-page .entry small{color:var(--muted)}
#mct-page .delete{color:#a12755;background:white;border:1px solid #ead1dd;border-radius:8px;padding:6px 10px}
#mct-page .footer{border-top:1px solid var(--line);margin-top:55px;padding:28px 0;color:var(--muted);font-size:.86rem}
#mct-page .symptoms{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
#mct-page .symptoms label{border:1px solid var(--line);border-radius:30px;padding:8px 12px;font-size:.85rem;cursor:pointer}
#mct-page .symptoms label:has(input:checked){background:var(--rose);border-color:var(--pink)}
#mct-page .symptoms input{accent-color:var(--pink)}
#mct-page .error{color:#a12848;font-weight:650}
#mct-page .success{color:var(--green);font-weight:650}
@media (max-width:850px){#mct-page .layout{grid-template-columns:1fr}
#mct-page .choices{grid-template-columns:1fr}
#mct-page .stat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){#mct-page .wrap{padding:0 15px}
#mct-page .hero{padding:42px 0 20px}
#mct-page .card{padding:17px}
#mct-page .field-grid{grid-template-columns:1fr}
#mct-page .stat-grid{grid-template-columns:1fr 1fr}
#mct-page .day{min-height:49px;padding:5px;font-size:.8rem}
#mct-page .cal-grid{gap:3px}
#mct-page .nav .pill{display:none}
#mct-page .btn{padding:10px 13px}}


#mct-page .tracker-guide{margin-bottom:22px}
#mct-page .tracker-guide p{max-width:850px}
#mct-page .guide-steps{padding-left:24px;display:grid;gap:12px;margin:18px 0 22px}
#mct-page .guide-steps li{padding-left:5px}
#mct-page .tracker-guide .notice{margin:18px 0}
@media (max-width:520px){#mct-page .tracker-guide{padding:20px}
#mct-page .guide-steps{gap:15px}}



/* Full-width desktop and mobile presentation */


#mct-page .wrap{max-width:none!important;width:100%}


#mct-page .hero-inner{grid-template-columns:minmax(0,1fr) minmax(360px,.85fr)}


#mct-page .public-guide{width:calc(100% - clamp(32px,6vw,120px))!important;margin:22px auto 28px}


@media (min-width:1050px){#mct-page .public-guide .guide-steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:38px}
#mct-page .hero-portrait img{height:390px}}


@media (max-width:760px){#mct-page .hero-inner{grid-template-columns:1fr}
#mct-page .public-guide{width:calc(100% - 30px)!important}
#mct-page .public-guide .guide-steps{grid-template-columns:1fr}
#mct-page .hero-portrait img{height:240px}}




#mct-page .hero-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);align-items:center;gap:24px}


#mct-page .hero-portrait{margin:0;overflow:hidden;border-radius:24px;box-shadow:0 16px 44px #5c314824;background:#f8e9f0}


#mct-page .hero-portrait img{width:100%;height:380px;object-fit:cover;object-position:58% 42%;display:block}


#mct-page .public-guide{margin:24px auto 26px;box-shadow:0 12px 35px #5c314810}


#mct-page .guide-steps{padding-left:24px;display:grid;gap:10px}
#mct-page .guide-steps li{padding-left:5px}


#mct-page .example-panel{margin:20px 0;padding:16px;background:#fff7fa;border:1px solid #ead2df;border-radius:14px}


#mct-page .example-scroll{overflow-x:auto}
#mct-page .example-panel table{border-collapse:collapse;width:100%;margin:12px 0;font-size:.88rem}


#mct-page .example-panel th, #mct-page .example-panel td{padding:9px 11px;border:1px solid #e6d5df;text-align:left}


#mct-page .example-panel th{background:#f5e2ec;color:#63304d}
#mct-page .example-panel small{color:#766873}


#mct-page #periodEntry{margin:18px 0 22px;scroll-margin-top:20px}
#mct-page .next-period-label{background:#f9e7f0;border-left:4px solid #ad427a;padding:10px 14px;border-radius:7px;font-weight:750;color:#5c3148;margin:10px 0 18px}


#mct-page #goToEntry{margin:16px 0}
#mct-page .tracker-guide{margin-bottom:26px}


@media (max-width:760px){#mct-page .hero-inner{grid-template-columns:1fr}
#mct-page .hero-portrait img{height:230px;object-position:55% 35%}
#mct-page .hero{padding:22px 0 20px}
#mct-page .public-guide{margin:16px auto 20px}
#mct-page .example-panel{padding:11px}
#mct-page .example-panel th, #mct-page .example-panel td{padding:7px 8px;font-size:.78rem}}


/* Embedded in existing PCOS Ferticure layout */
#mct-page{width:100%;max-width:none;overflow-x:clip}#mct-page .wrap{width:min(100% - 32px,1800px);max-width:none;margin-inline:auto}#mct-page .hero-portrait img{object-fit:cover;object-position:center 28%}#mct-page .hero-portrait{overflow:hidden}


/* Display the complete menstrual tracker banner */
#mct-page .hero-portrait {
    width: 100%;
    max-width: none;
    height: auto;
    overflow: visible;
}

#mct-page .hero-portrait img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

/* Mobile */
@media (max-width: 760px) {
    #mct-page .hero-portrait {
        width: 100%;
        height: auto;
    }

    #mct-page .hero-portrait img {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }
}

/* Menstrual Tracker — Full-width banner layout */

#mct-page .hero {
    padding: 16px 0 20px;
    background: #fffaf7;
}

#mct-page .hero-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    max-width: none;
}

/* Hide duplicate heading and description visually.
   The image already contains this information. */
#mct-page .hero-inner > .eyebrow,
#mct-page .hero-inner > h1,
#mct-page .hero-inner > p {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Full-width image */
#mct-page .hero-portrait {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
}

#mct-page .hero-portrait img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

/* Mobile */
@media (max-width: 760px) {
    #mct-page .hero {
        padding: 8px 0 12px;
    }

    #mct-page .hero-inner {
        width: 100%;
        padding: 0 8px;
    }

    #mct-page .hero-portrait {
        border-radius: 8px;
    }
}