:root{
  --navy:#071426;
  --navy-soft:#0d2139;
  --navy-light:#153452;

  --gold:#d8aa3d;
  --gold-light:#f2d276;
  --gold-pale:#fff8e8;

  --background:#eef2f6;
  --surface:#ffffff;

  --ink:#122033;
  --text:#475467;
  --muted:#7d8998;

  --line:#e1e6ec;

  --danger:#b42318;

  --shadow-sm:0 8px 28px rgba(7,20,38,.06);
  --shadow-md:0 22px 60px rgba(7,20,38,.10);
  --shadow-lg:0 32px 90px rgba(7,20,38,.16);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(
      circle at top left,
      rgba(216,170,61,.08),
      transparent 400px
    ),
    var(--background);

  color:var(--ink);

  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  cursor:pointer;
}

a{
  color:inherit;
}


/* =========================
   HEADER
========================= */

.tool-header{
  position:sticky;
  top:0;
  z-index:100;

  min-height:82px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:
    12px
    max(3.5vw,20px);

  background:
    rgba(7,20,38,.96);

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid
    rgba(216,170,61,.20);

  box-shadow:
    0 8px 30px
    rgba(0,0,0,.10);
}

.header-left{
  display:flex;
  align-items:center;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;

  color:#fff;

  text-decoration:none;
}

.brand img{
  width:48px;
  height:48px;

  object-fit:cover;

  border-radius:50%;

  border:
    1px solid
    rgba(242,210,118,.70);

  box-shadow:
    0 0 0 4px
    rgba(216,170,61,.07);
}

.brand-copy{
  display:grid;
  line-height:1;
}

.brand-copy b{
  color:var(--gold-light);

  font:
    800
    16px
    Manrope,
    sans-serif;

  letter-spacing:2px;
}

.brand-copy small{
  margin-top:6px;

  color:#fff;

  font:
    700
    6px
    Manrope,
    sans-serif;

  letter-spacing:4px;
}

.header-divider{
  width:1px;
  height:30px;

  background:
    rgba(255,255,255,.14);
}

.return-home{
  display:flex;
  align-items:center;
  gap:8px;

  color:#b8c5d4;

  text-decoration:none;

  font-size:12px;
  font-weight:600;

  transition:.2s ease;
}

.return-home:hover{
  color:var(--gold-light);
}

.return-arrow{
  width:28px;
  height:28px;

  display:grid;
  place-content:center;

  border-radius:50%;

  border:
    1px solid
    rgba(255,255,255,.14);

  transition:.2s ease;
}

.return-home:hover
.return-arrow{
  border-color:
    rgba(242,210,118,.55);

  background:
    rgba(216,170,61,.08);
}

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

.save-state{
  display:flex;
  align-items:center;
  gap:7px;

  margin-right:6px;

  color:#9aabba;

  font-size:11px;
}

.save-dot,
.live-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#42c67a;

  box-shadow:
    0 0 0 4px
    rgba(66,198,122,.12);
}

.gold-btn,
.ghost-btn{
  min-height:42px;

  border-radius:9px;

  padding:
    0 16px;

  font-size:12px;
  font-weight:800;

  transition:
    .2s ease;
}

.ghost-btn{
  color:#fff;

  background:
    rgba(255,255,255,.03);

  border:
    1px solid
    rgba(255,255,255,.16);
}

.ghost-btn:hover{
  background:
    rgba(255,255,255,.07);

  border-color:
    rgba(255,255,255,.28);
}

.gold-btn{
  display:flex;
  align-items:center;
  gap:10px;

  color:var(--navy);

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  border:0;

  box-shadow:
    0 8px 20px
    rgba(216,170,61,.18);
}

.gold-btn:hover{
  transform:
    translateY(-1px);

  box-shadow:
    0 12px 28px
    rgba(216,170,61,.28);
}

.button-arrow{
  font-size:17px;
  line-height:1;
}


/* =========================
   HERO
========================= */

.tool-intro{
  position:relative;
  overflow:hidden;

  min-height:380px;

  display:grid;
  place-items:center;

  padding:
    72px
    24px
    75px;

  background:
    linear-gradient(
      135deg,
      #050e19 0%,
      #071426 45%,
      #102d4c 100%
    );

  color:#fff;
}

.tool-intro::before{
  content:"";

  position:absolute;
  inset:0;

  opacity:.08;

  background-image:
    linear-gradient(
      rgba(255,255,255,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.05) 1px,
      transparent 1px
    );

  background-size:
    70px 70px;
}

.intro-glow{
  position:absolute;

  border-radius:50%;

  filter:blur(30px);
}

.intro-glow-one{
  width:400px;
  height:400px;

  top:-250px;
  right:6%;

  background:
    rgba(216,170,61,.18);
}

.intro-glow-two{
  width:350px;
  height:350px;

  left:-200px;
  bottom:-220px;

  background:
    rgba(34,104,170,.18);
}

.intro-inner{
  position:relative;
  z-index:2;

  width:min(
    900px,
    100%
  );

  text-align:center;
}

.intro-badge{
  width:max-content;

  display:flex;
  align-items:center;
  gap:9px;

  margin:
    0 auto
    16px;

  padding:
    7px 12px;

  border-radius:50px;

  border:
    1px solid
    rgba(242,210,118,.25);

  background:
    rgba(216,170,61,.08);

  color:
    var(--gold-light);

  font:
    800
    9px
    Manrope,
    sans-serif;

  letter-spacing:
    1.7px;
}

.intro-badge span{
  width:6px;
  height:6px;

  border-radius:50%;

  background:
    var(--gold-light);
}

.tool-intro h1{
  max-width:900px;

  margin:
    0 auto;

  color:#fff;

  font:
    800
    clamp(
      34px,
      5vw,
      64px
    )/1.08
    Manrope,
    sans-serif;

  letter-spacing:-2px;
}

.tool-intro h1 span{
  display:block;

  color:
    var(--gold-light);
}

.tool-intro p{
  max-width:700px;

  margin:
    20px auto
    0;

  color:#b5c4d3;

  font-size:
    15px;

  line-height:
    1.75;
}

.intro-features{
  width:max-content;

  max-width:100%;

  display:flex;

  margin:
    34px auto
    0;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:
    12px;

  overflow:hidden;

  background:
    rgba(255,255,255,.04);

  backdrop-filter:
    blur(12px);
}

.intro-features div{
  min-width:135px;

  padding:
    14px 20px;

  display:grid;

  border-right:
    1px solid
    rgba(255,255,255,.09);
}

.intro-features div:last-child{
  border-right:0;
}

.intro-features strong{
  color:#fff;

  font:
    800
    12px
    Manrope,
    sans-serif;
}

.intro-features span{
  margin-top:2px;

  color:#91a3b7;

  font-size:9px;
}


/* =========================
   WORKSPACE
========================= */

.workspace{
  width:min(
    1580px,
    calc(100% - 34px)
  );

  margin:
    0 auto;

  padding:
    40px 0
    80px;
}

.workspace-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;

  margin-bottom:24px;
}

.eyebrow{
  color:#a07821;

  font:
    800
    9px
    Manrope,
    sans-serif;

  letter-spacing:1.5px;
}

.workspace-heading h2{
  margin:
    7px 0
    5px;

  color:
    var(--navy);

  font:
    800
    26px
    Manrope,
    sans-serif;
}

.workspace-heading p{
  margin:0;

  color:
    var(--muted);

  font-size:12px;
}

.security-note{
  display:flex;
  align-items:center;
  gap:10px;

  padding:
    10px 14px;

  border:
    1px solid
    #dfe6e2;

  border-radius:
    10px;

  background:
    #f8fbf9;
}

.security-icon{
  width:28px;
  height:28px;

  display:grid;
  place-content:center;

  border-radius:
    50%;

  color:#268b54;

  background:
    #e8f6ee;

  font-weight:800;
}

.security-note div{
  display:grid;
}

.security-note strong{
  color:#344054;

  font-size:10px;
}

.security-note small{
  color:#84918c;

  font-size:8px;
  margin-top:1px;
}


/* =========================
   BUILDER
========================= */

.builder{
  display:grid;

  grid-template-columns:
    minmax(480px,.82fr)
    minmax(620px,1.18fr);

  gap:24px;

  align-items:start;
}

.controls{
  display:grid;
  gap:16px;
}

.control-card{
  position:relative;

  padding:
    24px;

  background:
    rgba(255,255,255,.94);

  border:
    1px solid
    var(--line);

  border-radius:
    16px;

  box-shadow:
    var(--shadow-sm);

  transition:
    .25s ease;
}

.control-card:hover{
  border-color:
    #d8d2c4;

  box-shadow:
    0 16px 40px
    rgba(7,20,38,.075);
}

.card-heading{
  display:flex;
  align-items:center;
  gap:13px;

  margin-bottom:
    20px;
}

.step-number{
  width:38px;
  height:38px;

  flex:0 0 auto;

  display:grid;
  place-content:center;

  border-radius:
    10px;

  color:
    var(--gold-light);

  background:
    linear-gradient(
      145deg,
      var(--navy),
      #102b49
    );

  box-shadow:
    0 8px 18px
    rgba(7,20,38,.13);

  font:
    800
    10px
    Manrope,
    sans-serif;
}

.card-heading h2{
  margin:0;

  color:
    var(--navy);

  font:
    800
    17px
    Manrope,
    sans-serif;
}

.card-heading p{
  margin:
    3px 0
    0;

  color:
    var(--muted);

  font-size:
    10px;
}

.field-grid{
  display:grid;
  gap:12px;
}

.field-grid.two{
  grid-template-columns:
    repeat(2,1fr);
}

.field-grid.three{
  grid-template-columns:
    repeat(3,1fr);
}

label{
  display:grid;
  gap:7px;

  margin:
    12px 0
    0;

  color:
    #475467;

  font-size:
    11px;

  font-weight:700;
}

label > span{
  display:flex;
  align-items:center;
  gap:5px;
}

input,
textarea,
select{
  width:100%;

  border:
    1px solid
    #d8dee6;

  border-radius:
    9px;

  outline:0;

  background:
    #fcfdfe;

  color:
    var(--ink);

  padding:
    11px 12px;

  font-size:
    13px;

  transition:
    .2s ease;

  box-shadow:
    inset
    0 1px 1px
    rgba(7,20,38,.015);
}

input,
select{
  height:44px;
}

textarea{
  resize:vertical;

  min-height:
    86px;

  line-height:
    1.55;
}

input:hover,
textarea:hover,
select:hover{
  border-color:
    #c4ccd6;
}

input:focus,
textarea:focus,
select:focus{
  border-color:
    var(--gold);

  background:#fff;

  box-shadow:
    0 0 0 4px
    rgba(216,170,61,.10);
}


/* =========================
   LOGO UPLOAD
========================= */

.logo-upload{
  display:flex;
  align-items:center;
  gap:17px;

  margin-bottom:
    8px;

  padding:
    15px;

  border:
    1px dashed
    #cdd4dd;

  border-radius:
    12px;

  background:
    #fafbfd;
}

.logo-preview-wrapper{
  width:70px;
  height:70px;

  flex:0 0 auto;

  display:grid;
  place-content:center;

  overflow:hidden;

  border-radius:
    11px;

  background:
    var(--navy);

  box-shadow:
    0 7px 18px
    rgba(7,20,38,.10);
}

.logo-preview-wrapper img{
  width:70px;
  height:70px;

  object-fit:cover;
}

.logo-upload-copy{
  display:grid;
  justify-items:start;
}

.logo-upload-copy strong{
  color:
    var(--navy);

  font-size:
    12px;
}

.logo-upload-copy small{
  margin-top:3px;

  color:
    var(--muted);

  font-size:
    9px;
}

.upload-btn{
  display:inline-flex;

  width:max-content;

  margin-top:
    8px;

  padding:
    7px 11px;

  border-radius:
    7px;

  color:#805e19;

  background:
    #fff5dc;

  border:
    1px solid
    #efdaaa;

  font-size:
    10px;

  font-weight:
    800;

  cursor:pointer;

  transition:
    .2s ease;
}

.upload-btn:hover{
  background:
    #ffefc3;
}


/* =========================
   ITEMS
========================= */

.items-editor{
  overflow-x:auto;
}

.item-head,
.item-row{
  min-width:
    470px;

  display:grid;

  grid-template-columns:
    1fr
    68px
    110px
    34px;

  gap:8px;

  align-items:center;
}

.item-head{
  padding:
    0 5px
    7px;

  color:
    #98a2b3;

  font:
    800
    9px
    Manrope,
    sans-serif;

  letter-spacing:
    .7px;
}

.item-row{
  margin-bottom:
    8px;
}

.item-row input{
  margin:0;
}

.remove-item{
  width:32px;
  height:32px;

  display:grid;
  place-content:center;

  border:0;

  border-radius:
    7px;

  color:
    var(--danger);

  background:
    #fff0ef;

  font-size:
    18px;

  font-weight:
    700;

  transition:
    .2s ease;
}

.remove-item:hover{
  background:
    #fee4e2;

  transform:
    scale(1.04);
}

.add-btn{
  display:flex;
  align-items:center;
  gap:6px;

  margin-top:
    10px;

  padding:
    10px 14px;

  border:
    1px solid
    #e6d4a5;

  border-radius:
    8px;

  color:
    #7b5a17;

  background:
    linear-gradient(
      180deg,
      #fffdf8,
      #fff8e8
    );

  font-size:
    11px;

  font-weight:
    800;

  transition:
    .2s ease;
}

.add-btn:hover{
  border-color:
    var(--gold);

  transform:
    translateY(-1px);
}


/* =========================
   PREVIEW SHELL
========================= */

.preview-shell{
  position:sticky;
  top:105px;
}

.preview-toolbar{
  min-height:
    43px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:
    0 15px;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      #0d2743
    );

  color:#fff;

  border-radius:
    13px 13px 0 0;

  border-bottom:
    1px solid
    rgba(216,170,61,.20);

  box-shadow:
    0 -4px 20px
    rgba(7,20,38,.05);
}

.preview-toolbar-left{
  display:flex;
  align-items:center;
  gap:9px;
}

.preview-toolbar b{
  font:
    800
    9px
    Manrope,
    sans-serif;

  letter-spacing:
    1.2px;
}

.preview-toolbar-right{
  color:#91a4b8;

  font-size:
    8px;

  letter-spacing:
    1px;
}


/* =========================
   INVOICE
========================= */

.invoice{
  position:relative;

  min-height:
    980px;

  padding:
    46px
    46px
    34px;

  background:#fff;

  overflow:hidden;

  box-shadow:
    var(--shadow-lg);
}

.invoice::after{
  content:"";

  position:absolute;

  width:320px;
  height:320px;

  right:-190px;
  top:-180px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(216,170,61,.08),
      transparent 65%
    );

  pointer-events:none;
}

.invoice-topline{
  position:absolute;

  top:0;
  left:0;
  right:0;

  height:6px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold-light),
      var(--gold)
    );
}


/* =========================
   INVOICE HEADER
========================= */

.invoice-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  padding-bottom:
    28px;

  border-bottom:
    1px solid
    #e7e9ed;
}

.invoice-brand{
  display:flex;
  align-items:center;
  gap:13px;
}

.invoice-brand img{
  width:62px;
  height:62px;

  object-fit:cover;

  border-radius:
    9px;

  background:
    var(--navy);

  box-shadow:
    0 6px 16px
    rgba(7,20,38,.08);
}

.invoice-brand > div{
  display:grid;
}

.invoice-brand strong{
  color:
    var(--navy);

  font:
    800
    19px
    Manrope,
    sans-serif;
}

.invoice-brand span{
  margin-top:3px;

  color:
    #7c8795;

  font-size:
    9px;
}

.invoice-title{
  text-align:right;
}

.invoice-title small{
  display:block;

  margin-bottom:
    2px;

  color:
    #a5aeb8;

  font:
    800
    7px
    Manrope,
    sans-serif;

  letter-spacing:
    1.6px;
}

.invoice-title h2{
  margin:0;

  color:
    var(--navy);

  font:
    800
    34px
    Manrope,
    sans-serif;

  letter-spacing:
    1px;
}

.invoice-title b{
  display:block;

  margin-top:
    4px;

  color:
    #af8120;

  font-size:
    10px;
}


/* =========================
   META
========================= */

.invoice-meta{
  display:grid;

  grid-template-columns:
    1fr
    1fr
    .72fr;

  gap:
    34px;

  padding:
    30px 0;
}

.invoice-meta > div:not(.dates){
  display:flex;
  flex-direction:column;
}

.invoice-meta small,
.summary-notes small,
.invoice-terms small{
  margin-bottom:
    8px;

  color:
    #a57b22;

  font:
    800
    8px
    Manrope,
    sans-serif;

  letter-spacing:
    1.4px;
}

.invoice-meta strong{
  margin-bottom:
    4px;

  color:
    var(--navy);

  font:
    800
    12px
    Manrope,
    sans-serif;
}

.invoice-meta span{
  color:
    #667085;

  font-size:
    9px;

  line-height:
    1.55;

  white-space:
    pre-line;
}

.dates p{
  margin:
    0 0
    15px;
}

.dates small{
  display:block;
}

.dates strong{
  color:
    var(--navy);

  font-size:
    10px;
}


/* =========================
   INVOICE ITEMS
========================= */

.invoice-items{
  margin-top:
    3px;
}

.invoice-item-head,
.preview-item{
  display:grid;

  grid-template-columns:
    1fr
    62px
    95px
    110px;

  gap:10px;

  align-items:center;
}

.invoice-item-head{
  padding:
    12px 13px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      #102943
    );

  border-radius:
    5px 5px 0 0;

  font:
    800
    8px
    Manrope,
    sans-serif;

  letter-spacing:
    1px;
}

.invoice-item-head
span:not(:first-child),
.preview-item span{
  text-align:right;
}

.preview-item{
  padding:
    14px 13px;

  border-bottom:
    1px solid
    #eceef1;

  font-size:
    10px;

  transition:
    .15s ease;
}

.preview-item:nth-child(even){
  background:
    #fbfcfd;
}

.preview-item strong{
  color:
    var(--navy);

  font:
    700
    10px
    Manrope,
    sans-serif;
}

.preview-item span{
  color:
    #566173;
}


/* =========================
   TOTALS
========================= */

.invoice-summary{
  display:grid;

  grid-template-columns:
    1fr
    250px;

  gap:
    45px;

  padding:
    31px 0;
}

.summary-notes > div{
  margin-bottom:
    20px;
}

.summary-notes p,
.invoice-terms p{
  margin:0;

  color:
    #667085;

  font-size:
    9px;

  line-height:
    1.65;

  white-space:
    pre-line;
}

.totals{
  padding:
    4px 0;
}

.totals p{
  display:flex;
  justify-content:space-between;
  gap:15px;

  margin:0;

  padding:
    8px 2px;

  border-bottom:
    1px solid
    #eceef1;

  color:
    #667085;

  font-size:
    10px;
}

.totals p b{
  color:
    var(--ink);
}

.totals > div{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-top:
    12px;

  padding:
    15px 14px;

  border:
    1px solid
    #ead49c;

  border-radius:
    7px;

  color:
    var(--navy);

  background:
    linear-gradient(
      135deg,
      #fbf5e6,
      #fff9ea
    );
}

.totals > div span{
  font:
    800
    9px
    Manrope,
    sans-serif;

  letter-spacing:
    1.1px;
}

.totals > div strong{
  font:
    800
    19px
    Manrope,
    sans-serif;
}


/* =========================
   TERMS / FOOTER
========================= */

.invoice-terms{
  padding:
    19px 0;

  border-top:
    1px solid
    #e8eaee;
}

.invoice-footer{
  position:absolute;

  left:46px;
  right:46px;
  bottom:26px;

  display:flex;
  justify-content:space-between;

  padding-top:
    14px;

  border-top:
    1px solid
    #e8eaee;

  color:
    #98a2b3;

  font-size:
    7px;
}

.invoice-footer b{
  color:
    #9b741d;
}


/* =========================
   CTA
========================= */

.tool-cta{
  position:relative;

  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:50px;

  padding:
    70px
    max(6vw,28px);

  background:
    linear-gradient(
      120deg,
      #050e19,
      #071426 50%,
      #102d4c
    );

  color:#fff;
}

.tool-cta::after{
  content:"";

  position:absolute;

  width:380px;
  height:380px;

  right:-170px;
  top:-220px;

  border-radius:
    50%;

  background:
    rgba(216,170,61,.09);
}

.cta-content{
  position:relative;
  z-index:2;

  max-width:
    720px;
}

.tool-cta span{
  color:
    var(--gold-light);

  font:
    800
    9px
    Manrope,
    sans-serif;

  letter-spacing:
    1.7px;
}

.tool-cta h2{
  margin:
    8px 0;

  color:#fff;

  font:
    800
    clamp(
      26px,
      3vw,
      42px
    )
    Manrope,
    sans-serif;
}

.tool-cta p{
  max-width:
    660px;

  margin:0;

  color:
    #aebdcc;

  font-size:
    13px;

  line-height:
    1.65;
}

.tool-cta > a{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  gap:12px;

  white-space:nowrap;

  padding:
    14px 18px;

  border-radius:
    9px;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  color:
    var(--navy);

  text-decoration:none;

  font-size:
    12px;

  font-weight:
    800;

  box-shadow:
    0 12px 30px
    rgba(216,170,61,.20);

  transition:
    .2s ease;
}

.tool-cta > a span{
  color:
    var(--navy);

  font-size:
    16px;
}

.tool-cta > a:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 16px 38px
    rgba(216,170,61,.30);
}


/* =========================
   SITE FOOTER
========================= */

.site-footer{
  min-height:
    70px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:
    20px
    max(4vw,20px);

  color:
    #738398;

  background:
    #030a12;

  border-top:
    1px solid
    rgba(255,255,255,.04);

  font-size:
    9px;
}

.site-footer > div:first-child{
  display:flex;
  align-items:center;
  gap:10px;
}

.site-footer strong{
  color:
    var(--gold-light);

  font:
    800
    10px
    Manrope,
    sans-serif;
}

.footer-security{
  display:flex;
  align-items:center;
  gap:6px;
}

.footer-security span{
  width:18px;
  height:18px;

  display:grid;
  place-content:center;

  border-radius:
    50%;

  color:#49c57c;

  background:
    rgba(73,197,124,.08);
}


/* =========================
   RESPONSIVE
========================= */

@media(
  max-width:1200px
){

  .builder{
    grid-template-columns:
      1fr;
  }

  .preview-shell{
    position:relative;
    top:0;
  }

  .invoice,
  .preview-toolbar{
    max-width:
      850px;

    margin-left:auto;
    margin-right:auto;
  }

}


@media(
  max-width:760px
){

  .tool-header{
    min-height:
      70px;

    padding:
      10px
      13px;
  }

  .header-left{
    gap:11px;
  }

  .brand-copy{
    display:none;
  }

  .header-divider{
    display:none;
  }

  .return-home{
    font-size:
      10px;
  }

  .save-state{
    display:none;
  }

  .tool-intro{
    min-height:
      340px;

    padding:
      58px
      18px;
  }

  .tool-intro h1{
    letter-spacing:
      -1.3px;
  }

  .tool-intro p{
    font-size:
      13px;
  }

  .intro-features{
    width:100%;
  }

  .intro-features div{
    flex:1;

    min-width:0;

    padding:
      12px
      10px;
  }

  .workspace{
    width:
      calc(100% - 18px);

    padding-top:
      28px;
  }

  .workspace-heading{
    display:block;
  }

  .security-note{
    width:max-content;

    max-width:100%;

    margin-top:
      15px;
  }

  .control-card{
    padding:
      18px;
  }

  .field-grid.two,
  .field-grid.three{
    grid-template-columns:
      1fr;
  }

  .invoice{
    min-height:
      900px;

    padding:
      30px
      20px
      25px;
  }

  .invoice-head{
    display:block;
  }

  .invoice-title{
    margin-top:
      24px;

    text-align:left;
  }

  .invoice-meta{
    grid-template-columns:
      1fr 1fr;

    gap:24px;
  }

  .invoice-meta .dates{
    grid-column:
      1/-1;

    display:flex;
    gap:45px;
  }

  .invoice-item-head,
  .preview-item{
    grid-template-columns:
      1fr
      38px
      72px
      84px;

    gap:6px;
  }

  .invoice-summary{
    display:block;
  }

  .totals{
    margin-top:
      25px;
  }

  .invoice-footer{
    left:
      20px;

    right:
      20px;
  }

  .tool-cta{
    display:block;

    padding:
      55px
      22px;
  }

  .tool-cta > a{
    width:max-content;

    margin-top:
      22px;
  }

  .site-footer{
    display:block;

    text-align:center;
  }

  .site-footer > div:first-child,
  .footer-security{
    justify-content:center;
  }

  .footer-security{
    margin-top:
      10px;
  }

}


@media(
  max-width:480px
){

  .ghost-btn{
    display:none;
  }

  .gold-btn{
    padding:
      0 12px;

    font-size:
      10px;
  }

  .return-home span:last-child{
    display:none;
  }

  .invoice-brand img{
    width:
      52px;

    height:
      52px;
  }

  .invoice-title h2{
    font-size:
      28px;
  }

  .invoice-item-head,
  .preview-item{
    font-size:
      8px;
  }

}


/* =========================
   PRINT
========================= */

@page{
  size:A4;
  margin:0;
}

@media print{

  body{
    background:#fff;
  }

  .tool-header,
  .tool-intro,
  .controls,
  .preview-toolbar,
  .tool-cta,
  .site-footer,
  .workspace-heading{
    display:none!important;
  }

  .workspace{
    width:auto;
    margin:0;
    padding:0;
  }

  .builder{
    display:block;
    width:auto;
    margin:0;
  }

  .preview-shell{
    position:static;
  }

  .invoice{
    width:
      210mm;

    min-height:
      297mm;

    margin:0;

    padding:
      15mm
      14mm
      12mm;

    box-shadow:none;
  }

  .invoice::after{
    display:none;
  }

  .invoice-footer{
    left:
      14mm;

    right:
      14mm;

    bottom:
      10mm;
  }

}