/* ---------------------------
      Tomoyo Marketing Theme
      Charcoal / Gold / Parchment
      Line   7: Colors
      Line  57: Header
      Line 150: Mobile Draw
      Line 168: Hero
    ---------------------------- */

    :root{
      --charcoal-900:#0f0f10;
      --charcoal-850:#141416;
      --charcoal-800:#1b1c1f;
      --charcoal-700:#24262b;

      --parchment-100:#f5f0e6;
      --parchment-200:#ece3d2;
      --parchment-300:#dccfb8;

      --gold-400:#d7b15a;
      --gold-500:#c79a3a;
      --gold-600:#a97b24;

      --text:#f3efe7;
      --muted:rgba(243,239,231,.72);
      --line:rgba(245,240,230,.14);

      --shadow: 0 14px 40px rgba(0,0,0,.35);
      --radius-xl: 22px;
      --radius-lg: 18px;
      --radius-md: 14px;

      --max: 1120px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background-color: var(--charcoal-800);
      overflow-x:hidden;
    }

    a{ color:inherit; text-decoration:none; }
    .container{ width:min(var(--max), 92vw); margin:0 auto; }

    /* Subtle parchment grain */
    .grain{
      position:fixed; inset:0; pointer-events:none; opacity:.10;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      mix-blend-mode:overlay;
    }

/* *************************************************** */
/*                       HEADER                        */
/* *************************************************** */
    header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(15,15,16,.82), rgba(15,15,16,.55));
      border-bottom:1px solid var(--line);
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 0;
    }

    .brand{
      display:flex; align-items:center; gap:10px;
      letter-spacing:.4px;
    }

    .mark{
      width:34px; height:34px; border-radius:12px;
      background:
        radial-gradient(circle at 30% 30%, rgba(245,240,230,.22), transparent 55%),
        linear-gradient(145deg, rgba(215,177,90,.30), rgba(15,15,16,.0)),
        linear-gradient(180deg, var(--charcoal-800), var(--charcoal-900));
      background-image: url('../images/logo-placeholder.png');
      background-repeat: no-repeat; 
      background-position: center; 
      background-size: contain; 
      border:1px solid rgba(215,177,90,.28);
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
      position:relative;
      overflow:hidden;
    }
    .mark:after{
      content:"";
      position:absolute; inset:-40%;
      background: conic-gradient(from 220deg, rgba(215,177,90,.0), rgba(215,177,90,.22), rgba(215,177,90,.0));
      transform: rotate(18deg);
      opacity:.75;
    }
    .brand strong{ font-weight:750; }
    .brand span{ color:var(--muted); font-size:13px; }

    .navlinks{
      display:none;
      gap:16px;
      align-items:center;
    }
    .navlinks a{
      font-size:14px;
      color:var(--muted);
      padding:10px 10px;
      border-radius:12px;
    }
    .navlinks a:hover{ color:var(--text); background:rgba(245,240,230,.06); }

    .actions{ display:flex; align-items:center; gap:10px; }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--line);
      background: rgba(245,240,230,.06);
      color:var(--text);
      font-weight:650;
      font-size:14px;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      cursor:pointer;
      user-select:none;
    }
    .btn:hover{
      transform: translateY(-1px);
      background: rgba(245,240,230,.08);
      border-color: rgba(215,177,90,.25);
    }
    .btn.primary{
      background: linear-gradient(180deg, rgba(215,177,90,.34), rgba(199,154,58,.18));
      border-color: rgba(215,177,90,.34);
      box-shadow: 0 14px 36px rgba(0,0,0,.35);
    }
    .btn.primary:hover{
      border-color: rgba(215,177,90,.52);
      background: linear-gradient(180deg, rgba(215,177,90,.42), rgba(199,154,58,.22));
      color:#fff;
    }

    .menu{
      width:44px; height:44px; border-radius:14px;
      border:1px solid var(--line);
      background: var(--gold-400);
      /* background: rgba(245,240,230,.04); */
      display:inline-flex; align-items:center; justify-content:center;
    }
    .menu svg{ opacity:.92; }

/* *************************************************** */
/*                 Mobile Draw                         */
/* *************************************************** */
    .drawer{
      display:none;
      border-top:1px solid var(--line);
      background: rgba(15,15,16,.88);
    }
    .drawer.open{ display:block; }
    .drawer a{
      display:flex;
      padding:14px 4vw;
      color:var(--muted);
      border-bottom:1px solid rgba(245,240,230,.07);
    }
    .drawer a:hover{ color:var(--text); background:rgba(245,240,230,.06); }

/* *************************************************** */
/*                     Hero                            */
/* *************************************************** */
    .hero{
      padding: 26px 0 10px;
    }
    .heroGrid{
      display:grid;
      gap:18px;
      grid-template-columns: 1fr;
      padding: 24px 0 10px;
    }

    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(215,177,90,.22);
      background: rgba(215,177,90,.08);
      color: rgba(245,240,230,.92);
      font-size:13px;
      width: fit-content;
    }
    .dot{
      width:8px; height:8px; border-radius:50%;
      background: var(--gold-400);
      box-shadow: 0 0 0 4px rgba(215,177,90,.16);
    }

    h1{
      margin: 30px 0px;
      font-size: clamp(24px, 5vw, 44px);
      line-height:1.03;
      letter-spacing:-.6px;
    }
    .lead{
      margin-bottom: 40px;
      color:var(--muted);
      font-size:16px;
      line-height:1.6;
    }

    .heroCtas{
      margin-top:16px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .tiny{
      font-size:13px;
      color: rgba(243,239,231,.62);
      margin-top:30px;
    }

    /* Showcase card */
    .showcase{
      border-radius: var(--radius-xl);
      border:1px solid rgba(245,240,230,.14);
      background-color: var(--charcoal-800);
      /*
      background:
        radial-gradient(700px 320px at 20% 10%, rgba(215,177,90,.16), transparent 60%),
        radial-gradient(500px 240px at 80% 30%, rgba(245,240,230,.10), transparent 60%),
        linear-gradient(180deg, rgba(36,38,43,.72), rgba(15,15,16,.72));
      */
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
      min-height: 360px;
    }
    .showcaseInner{
      padding:18px;
    }
    .mockTop{
      display:flex; align-items:center; justify-content:space-between;
      border:1px solid rgba(245,240,230,.12);
      background: rgba(15,15,16,.45);
      padding:12px 12px;
      border-radius: 16px;
    }
    .mockPills{ display:flex; gap:8px; }
    .pill{
      padding:8px 10px;
      border-radius:999px;
      background: rgba(245,240,230,.06);
      border:1px solid rgba(245,240,230,.10);
      color: rgba(243,239,231,.80);
      font-size:12px;
      white-space:nowrap;
    }
    .pill.gold{
      background: rgba(215,177,90,.10);
      border-color: rgba(215,177,90,.24);
      color: rgba(245,240,230,.92);
    }

    .mockBody{
      margin-top:14px;
      display:grid;
      gap:12px;
      grid-template-columns: 1fr;
    }

    .card{
      border-radius: 18px;
      border:1px solid rgba(245,240,230,.12);
      background: rgba(15,15,16,.45);
      padding:14px;
    }
    .card h3{
      margin:0 0 6px;
      font-size:14px;
      letter-spacing:.2px;
    }
    .card p{
      margin:0;
      color: rgba(243,239,231,.70);
      font-size:13px;
      line-height:1.55;
    }
    .row{
      display:flex; gap:10px; align-items:flex-start;
    }
    .icon{
      width:36px; height:36px; border-radius:14px;
      border:1px solid rgba(215,177,90,.22);
      background: rgba(215,177,90,.08);
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
    }

    /* Sections */
    section{ 
      margin: 40px 0px;
      padding: 20px;
    }

    .darkerBG { 
      background-color: var(--charcoal-900);
      border-radius: 15px;
      padding: 40px 20px;
    }

    .sectionTitle{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:10px;
      margin-bottom: 12px;
    }
    .sectionTitle h2{
      margin:0;
      font-size: 20px;
      letter-spacing:-.2px;
    }
    .sectionTitle p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      max-width: 55ch;
    }

    .grid3{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
    }

    .feature{
      border-radius: var(--radius-lg);
      border:1px solid rgba(245,240,230,.12);
      background: rgba(245,240,230,.04);
      padding:14px;
    }
    .feature strong{ display:block; margin-bottom:6px; }
    
    .feature span{
/*      display:block; */
      color: rgba(243,239,231,.72);
      font-size: 13px;
      line-height: 1.55;
    }

    .steps{
      display:grid;
      gap:12px;
      grid-template-columns: 1fr;
    }
    .step{
      border-radius: var(--radius-lg);
      border:1px solid rgba(245,240,230,.12);
      background: rgba(15,15,16,.35);
      padding:14px;
      position:relative;
      overflow:hidden;
    }
    .step:before{
      content:"";
      position:absolute; inset:-40%;
      background: radial-gradient(circle at 30% 30%, rgba(215,177,90,.18), transparent 60%);
      opacity:.6;
      transform: rotate(6deg);
    }
    .step > *{ position:relative; }
    .badge{
      display:inline-flex; align-items:center;
      padding:7px 10px;
      border-radius:999px;
      background: rgba(215,177,90,.10);
      border:1px solid rgba(215,177,90,.22);
      color: rgba(245,240,230,.92);
      font-size: 12px;
      margin-bottom:10px;
    }
    .step h3{ margin:0 0 6px; font-size: 15px; }
    .step p{ margin:0; color: rgba(243,239,231,.72); font-size: 13px; line-height:1.55; }

    /* CTA band */
    .ctaBand{
      border-radius: var(--radius-xl);
      border:1px solid rgba(215,177,90,.22);
      background:
        radial-gradient(900px 420px at 20% 10%, rgba(215,177,90,.20), transparent 60%),
        linear-gradient(180deg, rgba(245,240,230,.06), rgba(15,15,16,.35));
      box-shadow: var(--shadow);
      padding: 16px;
    }
    .ctaBand h2{ margin:0 0 8px; font-size: 20px; }
    .ctaBand p{ margin:0; color: var(--muted); font-size: 14px; line-height:1.6; }
    .ctaBand .heroCtas{ margin-top: 12px; }

    /* FAQ */
    details{
      border-radius: 16px;
      border:1px solid rgba(245,240,230,.12);
      background: rgba(245,240,230,.04);
      padding:12px 12px;
    }
    details + details{ margin-top:10px; }
    summary{
      cursor:pointer;
      list-style:none;
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
      font-weight:650;
      font-size: 14px;
    }
    summary::-webkit-details-marker{ display:none; }
    .chev{ opacity:.75; transition: transform .15s ease; }
    details[open] .chev{ transform: rotate(180deg); }
    .faqBody{
      margin-top:10px;
      color: rgba(243,239,231,.72);
      font-size: 13px;
      line-height: 1.6;
    }

    footer{
      padding: 22px 0 30px;
      color: rgba(243,239,231,.62);
      font-size: 13px;
      border-top: 1px solid rgba(245,240,230,.10);
      margin-top: 18px;
    }
    .footRow{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .footLinks{
      display:flex; flex-wrap:wrap; gap:12px;
      color: rgba(243,239,231,.62);
    }
    .footLinks a:hover{ color: var(--text); }

    /* Desktop enhancements */
    @media (min-width: 860px){
      .navlinks{ display:flex; }
      .menu{ display:none; }
      .drawer{ display:none !important; }

      .heroGrid{
        /* grid-template-columns: 1.05fr .95fr; */
        grid-template-columns: 65% 35%;
        align-items:stretch;
        gap: 22px;
        padding: 34px 0 18px;
      }
      .showcase{ min-height: 440px; }
      .mockBody{
        grid-template-columns: 1fr 1fr;
      }
      .grid3{
        grid-template-columns: repeat(3, 1fr);
      }
      .steps{
        grid-template-columns: repeat(3, 1fr);
      }
      .ctaBand{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:18px;
        padding: 18px 18px;
      }
      .ctaBand .left{ max-width: 66ch; }
      .footRow{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
      }
    }

    /* Focus */
    :focus-visible{
      outline: 2px solid rgba(215,177,90,.55);
      outline-offset: 3px;
      border-radius: 12px;
    }

/* ************************************************ */
/*                Auth Pages                        */
/* ************************************************ */
.auth-page {
  min-height: 100vh;
  background: #1e1e1e; /* charcoal */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5f0e6; /* parchment */
  font-family: system-ui, sans-serif;
}

.auth-container {
  width: 100%;
  max-width: 420px;
  padding: 2rem;
  background: #262626;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.auth-title {
  margin-bottom: 0.25rem;
  font-size: 1.75rem;
}

.auth-subtitle {
  margin-bottom: 1.5rem;
  opacity: 0.8;
}

.form-group {
  margin-bottom: 1.25rem;
}

label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

input {
  width: 100%;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid #444;
  background: #1e1e1e;
  color: #f5f0e6;
}

input:focus {
  outline: none;
  border-color: #c9a24d; /* gold */
}

.error-message {
  display: none;
  color: #ff6b6b;
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

.btn-primary {
  width: 100%;
  padding: 0.8rem;
  border-radius: 10px;
  border: none;
  background: #c9a24d;
  color: #1e1e1e;
  font-weight: bold;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: 0.6;
  background: #c9a24d;
  color: #fff;
}

.auth-links {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
}

.auth-links a {
  color: #c9a24d;
  text-decoration: none;
}

.auth-links span {
  margin: 0 0.5rem;
  opacity: 0.5;
}

.bright { color: var(--gold-400); }


/* WHY TOMOYO */
.why-tomoyo {
  padding: 4rem 1.5rem;
}

.why-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;
}

.why-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

.why-content h2 {
  color: var(--muted);
  font-size: 2rem;
  margin-bottom: 1.25rem;
}

.why-content p {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* Mobile */
@media (max-width: 768px) {
  .why-container {
    grid-template-columns: 1fr;
  }

  .why-image {
    order: -1;
  }
}


/* ************************************************ */
/*                   FEATURES                       */
/* ************************************************ */
.features {
  background-color: var(--charcoal);
  padding: 4.5rem 1.5rem;
}

.features-container {
  max-width: 1100px;
  margin: 0 auto;
}

.features-title {
  text-align: center;
  color: var(--gold);
  font-size: 2rem;
  margin-bottom: 3rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.feature-card {
  background-color: #1f1f1f;
  padding: 2rem;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.35);
  cursor: pointer;
}

.feature-card h3 {
  color: var(--gold);
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}

.feature-card p {
  color: #ddd;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Tablet */
@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* ************************************************ */
/*                TOOL TIP HOVER                    */
/* ************************************************ */
.tooltip {
  position: relative; /* Container is needed to position the tooltip text */
  display: inline-block;
  border-bottom: 1px dotted var(--gold-400); /* Optional: adds a dotted underline */
}

.tooltip .tooltiptext {
  visibility: hidden; /* Hide the tooltip text by default */
  background-color: var(--charcoal-700);
  color: #fff;
  text-align: center;
  border: thin solid white;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute; /* Position the tooltip text */
  z-index: 1; /* Ensures the tooltip is above other elements */
  bottom: 100%; /* Position the tooltip above the hovered text */
  left: 50%;
  margin-left: -60px; /* Use half the width to center the tooltip */
  opacity: 0;
  transition: opacity 0.3s; /* Add a fade-in effect */
}

.tooltip:hover .tooltiptext {
  min-width: 120px;
  padding: 0 10px;
  visibility: visible; /* Show the tooltip text when the user hovers over the parent */
  opacity: 1;
}

/* ************************************************ */
/*                Miscellaneous                     */
/* ************************************************ */
.buttons {
  width: 500px;
  margin: 0 auto;
}

.action_btn {
  display: inline-block;
  width: calc(50% - 4px);
  margin: 0 auto;
  border: none;
  border-radius: 6px;
  padding: 0.85rem 2.5rem;
  font-size: 1rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.left-side {
    width: 45%;
    float:left; /* add this */
}

.left-side img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    object-fit: cover;
}

.right-side {
  padding: 20px;
  height: 100%;
  overflow: hidden;
}