/*------------order html styles--------------*/
  :root{
    --bg: /*#FCFBF8*/ #fcfbf8;
    --bg-card: /*#F7F3ED*/#FCFBF8;
    --primary: #74271F;
    --primary-deep: #5A1E18;
    --ink: #2A211D;
    --ink-soft: #6B5D56;
    --gold: #B08D57;
    --line: rgba(116,39,31,0.16);
    --line-soft: rgba(116,39,31,0.09);
    --radius: 3px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ animation: none !important; transition: none !important; } }

  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Work Sans', sans-serif;
    line-height: 1.5;
  }

  h1,h2,h3{
    font-family: 'Newsreader', serif;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
  }

  a{ color: inherit; }
  button{ font-family: inherit; }

  :focus-visible{
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .wrap{
    max-width: 780px;
    margin: 0 auto;
    padding: 0 30px;
  }

  /* ---------- Header ---------- */
  .header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(90%, 600px);
    height: auto;
    display: flex;
    align-items: center;
    padding: 8px 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
    z-index: 1010;
}
  .logo {
      height: 30px;
      margin: 0;
      width: min(80px, 40vw);
      max-width: 100px;
      display: block;
      margin: 0 !important; 
      padding: 0 !important;
  }
  header .wrap{ display:flex; align-items:baseline; justify-content:space-between; }
  .wordmark{ font-family:'Newsreader', serif; font-style: italic; font-size: 22px; color: var(--primary); }
  .wordmark span{ font-style: normal; color: var(--ink-soft); font-family:'Work Sans', sans-serif; font-size: 13px; margin-left: 10px; }

  /* ---------- Hero ---------- */
  .hero { 
    padding: 72px 20px 56px; 
    text-align: center; 
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
  }
  .mockimg {
    width: 80%;
    height: auto;
    max-width: 350px;
  }
  .hero h1{
    font-size: clamp(32px, 5vw, 46px);
    line-height: 1.15;
    max-width: 560px;
    margin: 0 auto 18px;
    font-family: serif;
    color: #74271F;
    font-weight: 500;
  }
  .hero p{
    color: var(--ink-soft);
    max-width: 440px;
    margin: 0 auto 5px;
    font-size: 16px;
    letter-spacing: 0.2px;
    font-family: serif;
  }
  
  .btn{
    appearance:none; border:none; cursor:pointer;
    font-family: serif; 
    font-weight: 300; 
    font-size: 20.5px;
    padding: 14px 28px;
    border-radius: 100px;
    transition: background .15s ease, color .15s ease, transform .1s ease;
  }
  .btn-primary{ background: var(--primary); color: var(--bg); }
  .btn-primary:hover{ background: var(--primary-deep); }
  .btn-primary:disabled{ background: #D8CFC7; color:#9B8F86; cursor:not-allowed; }
  .btn-ghost{ background: transparent; color: var(--primary); border: 1px solid var(--line); }
  .btn-ghost:hover{ background: var(--line-soft); }

  section{ padding: 56px 0; }
  /*section + section{ border-top: 1px solid var(--line-soft); }*/

  .section-head{ margin-bottom: 30px; }
  .section-head h2{ font-size: 26px; margin-bottom: 8px; font-family: serif; }
  .section-head p{ color: var(--ink-soft); font-size: 15px; margin:0; font-family: serif; }
  .step-tag{ font-size: 13px; color: var(--gold); font-family: serif; font-weight:600; margin-bottom: 6px; }

  /* ---------- Pricing cards ---------- */
  .tiers{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 620px){ .tiers{ grid-template-columns: 1fr; } }

  .tier-card{
    border: 1px solid var(--line);
    background: var(--bg-card);
    padding: 28px 24px;
    cursor: pointer;
    position: relative;
    transition: border-color .15s ease, background .15s ease;
  }
  .tier-card:hover{ border-color: var(--primary); }
  .tier-card.selected{ border-color: var(--primary); background: #FBF3EE; }
  .tier-card.selected::after{
    content: '✓ selected';
    position:absolute; top:16px; right:18px;
    font-size: 12px; color: var(--primary); font-weight:600;
  }
  .tier-name{ font-family:'Newsreader', serif; font-size: 21px; margin-bottom: 6px; }
  .tier-price{ font-family:'Newsreader', serif; font-size: 30px; color: var(--primary); margin-bottom: 12px; }
  .tier-price sup{ font-size: 14px; font-family:'Work Sans',sans-serif; color: var(--ink-soft); top:-10px; }
  .tier-blurb{ color: var(--ink-soft); font-size: 14.5px; margin: 0; }

  .choose-design-row{ margin-top: 26px; text-align:center; display:none; }
  .choose-design-row.show{ display:block; }

  /* ---------- Modal ---------- */
  .modal-overlay{
    position: fixed; inset:0; background: rgba(42,33,29,0.55);
    display:none; align-items:center; justify-content:center;
    padding: 14px; z-index: 100;
  }
  .modal-overlay.open{ display:flex; }
  .modal{
    background: var(--bg); max-width: 640px; width:100%;
    max-height: 84vh; overflow-y:auto;
    border-radius: var(--radius);
    padding: 13px;
    position: relative;
  }
  .modal-close{
    position:absolute; top:18px; right:18px;
    width: 32px; height:32px; border-radius:50%;
    border:1px solid var(--line); background:none; cursor:pointer;
    color: var(--ink); font-size:16px; line-height:1;
  }
  .modal-close:hover{ background: var(--line-soft); }
  .modal h3{ font-size: 22px; margin-bottom: 4px; padding-right: 30px; }
  .modal .modal-sub{ color: var(--ink-soft); font-size:14px; margin-bottom:22px; }

  .template-grid{ display:grid; grid-template-columns: 2fr 2fr; gap:14px; }
  @media (max-width:480px){ /*.template-grid{ grid-template-columns:3fr; }*/ }
  .template-card{
    border:1px solid var(--line); 
    padding: 4px; 
    cursor:pointer;
    text-align:left; 
    background:none;
    transition: border-color .15s ease, transform .1s ease;
    display: flex; 
    flex-direction: column; gap: 6px;
  }
  .template-card:hover{ border-color: var(--primary); }
  .template-image img{ width: 100%; height: auto; object-fit: cover; margin-bottom: 12px; }
  .template-name{ font-family:'Newsreader', serif; font-size: 16px; margin-bottom:3px; }
  .template-tags{ font-size: 12.5px; color: var(--ink-soft); }

  /* ---------- Builder ---------- */
  #builder{ display:none; }
  #builder.show { 
    display:block;
    background-image: linear-gradient(to top, #fff5f4, #FCFBF8);
   }

  .picked-summary{
    display:flex; justify-content:space-between; align-items:center;
    background: var(--bg-card); border:1px solid var(--line-soft);
    padding: 14px 18px; margin-bottom: 28px; font-size: 14px;
  }
  .picked-summary .change-link{ color: var(--primary); font-weight:600; cursor:pointer; background:none; border:none; font-size:13.5px; }

  .row-item{
    display:flex; justify-content:space-between; align-items:center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .row-item:last-child{ border-bottom:none; }
  .row-main{ flex:1; }
  .row-name{ font-weight:600; font-size: 15px; margin-bottom:3px; }
  .row-desc{ color: var(--ink-soft); font-size: 13.5px; }
  .row-right{ display:flex; align-items:center; gap: 14px; flex-shrink:0; }
  .row-price{ font-family:'Newsreader', serif; font-size: 16px; min-width: 70px; text-align:right; }
  .included-tag{ font-size: 12px; color: var(--gold); font-weight:600; }

  .toggle{
    appearance:none; border:1px solid var(--primary); background:none;
    color: var(--primary); font-weight:600; font-size: 13px;
    padding: 7px 16px; border-radius: 20px; cursor:pointer; min-width: 76px;
    transition: background .15s ease, color .15s ease;
  }
  .toggle.added{ background: var(--primary); color: var(--bg); }

  .included-block{
    padding: 16px 0 20px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 6px;
  }
  .included-block .row-name{ font-size: 14px; color: var(--ink-soft); font-weight:500; margin-bottom:6px; }
  .included-block ul{ margin:0; padding-left: 18px; font-size: 14.5px; }
  .included-block li{ margin-bottom: 3px; }

  /* ---------- Sticky total bar ---------- */
  .total-bar{
    position: relative; 
    bottom: 0; left:0; right:0;
    background: var(--bg); 
    border-top: 1px solid var(--line);
    padding: 16px 0; 
    margin-top: 10px;
  }
  .total-bar-inner{ display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap:wrap; }
  .total-label{ font-size: 13px; color: var(--ink-soft); }
  .total-amount{ font-family:'Newsreader', serif; font-size: 26px; color: var(--primary); }

  footer{ padding: 40px 0 60px; text-align:center; color: var(--ink-soft); font-size: 13px; }

/*--------------process order html styles----------------*/
    .process {
      margin-top: 50px;
      padding: 0 30px;
    }
    .prch2 {
      font-family: serif;
        background-image: linear-gradient(to right, #c51906, #000000); 
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        display: block; 
      font-size: 35px;
      line-height: 1.2;
      margin: 0%;
      font-weight: 500;
      letter-spacing: 0.02em;
    }
    .process-step h2 {
      font-family: serif;
      font-size: 22px;
      line-height: 1.2;
      margin: 0%;
      font-weight: 500;
      padding-top: 10px;
      letter-spacing: 0.02em;
      background-image: linear-gradient(to right, #000000, #c51906); 
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        display: block; 
    }
    .process-step p {
      font-family: serif;
      font-size: 14px;
      line-height: 1.6;
      margin: 0%;
      font-weight: 400;
      padding-top: 10px;
      letter-spacing: 0.03em;
    }
    .process-step {
      display: flex;
      flex-direction: column;
      justify-content: flex-startl
    }
    .process-eyebrow {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .procnumtxt {
      display: flex;
      flex-direction: row;
      gap: 20px;
      margin-bottom: 18px;
      position: relative;
    }
    .procnum {
      font-family: sans-serif;
      font-size: 20px;
      line-height: 1.6;
      margin: 0%;
      font-weight: 400;
      padding-top: 10px;
      letter-spacing: 0.02em;
      background-color: #74271f;
      margin-top: 9px;
      color: #fff;
      padding: 5px 10px;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      min-width: 40px; 
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: visible;
      z-index: 2;
    }

.procnumtxt divs */
.procnumtxt:not(:nth-last-of-type(2)) .procnum::after {
    content: "";
    position: absolute;
    top: 100%;       /* Start at the bottom of the circle */
    left: 50%;       /* Center horizontally */
    transform: translateX(-50%);
    width: 1px;      /* Line thickness */
    height: 150px;    /* Gap distance - match this to your margin-bottom */
    background-color: #d3d3d3; /* Grey color */
    z-index: -1;     /* Behind the numbers */
}

/* Ensure the very last one never has a line, even if HTML changes */
.procnumtxt:last-of-type .procnum::after,
.callone .procnum::after {
    display: none !important;
}
/* 1. THIS IS THE MISSING PART: Create the lines for all numbers */
.procnum::after {
    content: ""; /* Required to make pseudo-elements show up */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100px; /* Adjust this to fit the vertical gap exactly */
    background-color: #aeaeae; /* The grey color you wanted */
    z-index: -1;
    display: block;
}