/* Homepage fit + device polish — match approved reference left/right layout.
   Loaded after inline homepage CSS. Does not change invoice math or routes.
   Inter is self-hosted (no CDN) so PWA/offline stays intact. */

@font-face{
  font-family:Inter;
  src:url("/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --home-max:1240px;
  --home-gutter:clamp(16px,2.4vw,40px);
  --blue:#0868ff;
  --ink:#0b1020;
}

html{text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

/* Wider centered shell — fills the screen like the reference mock */
.container{
  width:min(var(--home-max),calc(100% - (var(--home-gutter) * 2)));
  margin-inline:auto;
}

/* Header: full nav on desktop; hamburger only on smaller screens */
.site-header{height:56px}
.nav{
  gap:clamp(12px,1.6vw,28px);
  min-width:0;
  position:relative;
}
.brand{
  font-size:clamp(18px,1.35vw,22px);
  letter-spacing:-.04em;
  flex:0 0 auto;
  position:relative;
  z-index:3;
  max-width:none;
  overflow:visible;
}
.brand span,
.brand .blue,
.brand .dot{
  position:static;
  display:inline;
}
.navlinks{
  display:flex;
  flex:1 1 auto;
  justify-content:flex-end;
  gap:10px;
  font-size:12px;
  font-weight:600;
  min-width:0;
  overflow:hidden;
  margin-inline:8px;
}
.navlinks a{
  white-space:nowrap;
  position:relative;
  z-index:1;
  flex:0 0 auto;
}
.nav-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:3;
  margin-left:auto;
}
.nav-actions .icon-btn{
  flex:0 0 auto;
  position:relative;
  z-index:3;
}
.menu-btn{display:none}
.create-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 16px;
  font-size:12.5px;
  line-height:1;
  border-radius:8px;
  font-weight:800;
  box-sizing:border-box;
  text-decoration:none;
  white-space:nowrap;
  flex:0 0 auto;
}

/* Hero: flexible left editor / right preview — no fixed 592px trap */
.hero{padding:clamp(14px,2vw,22px) 0 clamp(10px,1.4vw,16px)}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(300px,0.92fr);
  gap:clamp(14px,1.8vw,24px);
  align-items:start;
}
.hero-grid > *{min-width:0}
.left-top{padding:0 2px 4px}
h1{
  font-size:clamp(34px,4.2vw,52px);
  line-height:1.02;
  letter-spacing:-.045em;
  max-width:none;
  font-weight:900;
}
h1 .blue{color:var(--blue)}
.subtitle{
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.35;
  color:#253753;
  max-width:36em;
}
.eyebrow{
  font-size:10.5px;
  letter-spacing:.04em;
  padding:6px 12px;
}

/* Benefit icons — clearer, reference-sized */
.benefits{gap:clamp(12px,1.6vw,22px);margin-bottom:16px}
.benefit .circle{
  width:34px;height:34px;flex:0 0 34px;
  font-size:15px;font-weight:800;
  box-shadow:0 4px 10px rgba(8,104,255,.12);
}
.benefit .circle svg{width:17px;height:17px}
.benefit b{font-size:11.5px;font-weight:800}
.benefit small{font-size:10px}

.builder-card{
  padding:clamp(10px,1.1vw,14px) clamp(12px,1.2vw,16px);
  border-radius:12px;
  min-height:0;
  box-shadow:0 12px 32px rgba(46,92,142,.1);
}
.doc-tabs{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
}
.doc-tab{
  height:34px;
  font-size:clamp(10px,0.78vw,12px);
  border-radius:8px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 8px;
  line-height:1;
  box-sizing:border-box;
}
.tab-ico{font-size:13px;opacity:.9;flex:0 0 auto}
.form2{gap:clamp(12px,1.4vw,20px)}
.panel-title{font-size:13px;margin:4px 0 8px}
.input,textarea,select{
  font-size:12px;
  padding:8px 10px;
  border-radius:7px;
}
textarea{height:92px}

.right-col{padding-top:0}
.right-art{height:118px;margin-bottom:2px}
.preview-card{
  height:auto;
  min-height:min(640px,70vh);
  padding:20px 18px 14px;
  border-radius:12px;
  box-shadow:0 16px 36px rgba(34,86,144,.14);
}
.preview-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.preview-actions > span,
.preview-actions .workspace-actions{grid-column:1 / -1}
#downloadBtn{grid-column:1 / -1}
.preview-actions button{
  height:40px;
  font-size:11px;
  border-radius:8px;
  min-width:0;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  line-height:1;
  box-sizing:border-box;
}
.preview-actions .primary{font-size:12px;font-weight:850}

.hero-strip{
  gap:clamp(12px,2vw,28px);
  padding:16px 2px 4px;
  flex-wrap:wrap;
}

/* Section grids fill the wider shell */
.section{padding:clamp(14px,2vw,22px) 0}
.section h2{font-size:clamp(20px,2vw,26px);letter-spacing:-.03em}
.grid8{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:10px;
}
.tool-card{
  min-height:108px;
  border-radius:10px;
  padding:12px 8px 10px;
}
.tool-icon{
  width:34px;height:34px;border-radius:9px;font-size:17px;margin-bottom:7px;
}
.tool-card b{font-size:11px;line-height:1.15}
.tool-card small{font-size:9.5px;line-height:1.25;margin-top:5px}
.country-card,.ind-card{min-height:68px;border-radius:10px}
.country-card .flag{font-size:0;line-height:0}
.ind-card .indico{font-size:26px}
.ind-card .indico svg{width:26px;height:26px}

.how{padding:clamp(16px,2.2vw,28px) 0}
.how-grid{
  grid-template-columns:minmax(200px,.9fr) minmax(0,1.4fr) minmax(100px,.35fr);
  gap:clamp(12px,2vw,24px);
}
.num{width:38px;height:38px;font-size:15px}

/* Safe area for notched phones / landscape home indicators */
.site-header .container,
.hero > .container,
.section > .container,
.how > .container,
.content-section > .container,
.footer > .container{
  padding-left:max(0px, env(safe-area-inset-left, 0px));
  padding-right:max(0px, env(safe-area-inset-right, 0px));
}

/* ---------- Breakpoints ---------- */

/* Large laptop: keep two columns, slightly tighter type */
@media (max-width:1280px){
  :root{--home-max:1120px}
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(280px,.88fr);gap:16px}
  .preview-actions{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:40px}
  .preview-actions > span,
  .preview-actions .workspace-actions,
  #downloadBtn{grid-column:1 / -1}
}

/* Mid desktops: collapse nav before brand / search / language overlap */
@media (max-width:1500px){
  .site-header{height:auto;min-height:52px;padding:8px 0}
  .navlinks{display:none !important}
  .navlinks.open{
    display:flex !important;
    position:absolute;
    top:100%;
    left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:10px 16px 14px;
    background:#fff;
    border:1px solid #e2e9f2;
    border-radius:0 0 12px 12px;
    box-shadow:var(--shadow);
    z-index:60;
    overflow:visible;
  }
  .navlinks.open a{padding:12px 8px;font-size:15px;min-height:44px;display:flex;align-items:center}
  .navlinks.open .navdrop{width:100%}
  .navlinks.open .dropmenu{
    display:none;
    position:static;
    box-shadow:none;
    border:0;
    padding:0 0 6px 12px;
    min-width:0;
    background:transparent;
  }
  .navlinks.open .navdrop:focus-within .dropmenu,
  .navlinks.open .navdrop:hover .dropmenu{display:grid}
  .menu-btn{display:grid !important}
  .nav{justify-content:space-between}
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(260px,.85fr)}
  .doc-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid8{grid-template-columns:repeat(4,minmax(0,1fr))}
  .how-grid{grid-template-columns:1fr;gap:16px}
  .download-art{display:none}
}

/* Tablet landscape / small laptop: readable controls while keeping 2 columns */
@media (max-width:1100px){
  .builder-card .input,
  .builder-card textarea,
  .builder-card select,
  .builder-card .item-row input,
  .builder-card .item-row select,
  .builder-card .calc-row input,
  .builder-card .calc-row select,
  .builder-card .advanced-fields .input,
  .builder-card .advanced-fields textarea,
  .builder-card .advanced-fields select{
    min-height:40px;
    font-size:15px;
    padding:8px 12px;
  }
  .builder-card textarea{min-height:96px}
  .doc-tab{min-height:40px;height:auto;padding:8px;font-size:12px}
  .nav-actions .icon-btn,
  .menu-btn{
    width:40px;height:40px;min-width:40px;min-height:40px;
  }
  .preview-actions button{min-height:44px;height:auto;font-size:12px}
}

/* Stack editor above preview — phone + tablet portrait */
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .right-art{display:none}
  .preview-card{
    margin-top:0;
    min-height:0;
    height:auto;
  }
  .left-top,.right-col,.builder-card,.preview-card{max-width:100%}
  .hero-strip{flex-direction:column;align-items:flex-start}
  .form2{grid-template-columns:1fr}
  .preview-actions{grid-template-columns:1fr 1fr;gap:8px}
  .preview-actions > span,
  .preview-actions .workspace-actions,
  #downloadBtn,
  .preview-actions .primary{grid-column:1/-1}
  .mobile-preview-button{
    display:block;
    width:100%;
    margin-top:10px;
    border:1px solid #a9c9f0;
    border-radius:8px;
    background:#f2f8ff;
    color:#0868ff;
    padding:14px;
    font-size:14px;
    font-weight:850;
    min-height:48px;
  }
  .content-grid,.faq-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .grid8{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

  /* Touch-friendly form controls (also avoids iOS input zoom) */
  .builder-card .input,
  .builder-card textarea,
  .builder-card select,
  .builder-card .item-row input,
  .builder-card .item-row select,
  .builder-card .calc-row input,
  .builder-card .calc-row select,
  .builder-card .advanced-fields .input,
  .builder-card .advanced-fields textarea,
  .builder-card .advanced-fields select,
  .builder-card .party-contact .input,
  .builder-card .line-extra input,
  .builder-card .line-extra select{
    min-height:44px;
    font-size:16px !important;
    padding:10px 12px;
    border-radius:8px;
    box-sizing:border-box;
  }
  .builder-card input[type="checkbox"]{
    width:22px;height:22px;min-width:22px;min-height:22px;
    accent-color:#0868ff;
  }
  .builder-card .check-label,
  .builder-card .remember-business{
    min-height:44px;
    display:flex !important;
    align-items:center;
    gap:10px;
    font-size:14px !important;
  }
  .builder-card textarea,
  .builder-card .advanced-fields textarea{min-height:100px}
  .builder-card .item-row input{
    height:auto;
    border:1px solid #dce2ea;
    border-right:1px solid #dce2ea;
    background:#fff;
  }
  .doc-tab{
    min-height:44px;height:auto;
    font-size:13px;
    padding:10px 8px;
  }
  .nav-actions .icon-btn,
  .menu-btn{
    width:44px;height:44px;min-width:44px;min-height:44px;
    touch-action:manipulation;
  }
  .add-item,
  .draft-button,
  .fig-open-gallery{
    min-height:44px;
    font-size:14px;
    padding:10px 12px;
  }
  .preview-actions button{
    min-height:48px;height:auto;
    font-size:13px;
    white-space:normal;
    padding:10px 8px;
  }

  /* Line items → stacked cards (no horizontal page scroll) */
  .items-table{
    overflow:visible;
    border:0;
    background:transparent;
  }
  .items-head{display:none}
  #itemRows{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .item-row{
    display:grid !important;
    grid-template-columns:32px minmax(0,1fr);
    grid-template-areas:
      "num desc"
      "qty qty"
      "rate rate"
      "amt amt"
      "act act";
    gap:8px 10px;
    min-width:0 !important;
    width:100%;
    padding:12px;
    border:1px solid #e1e8f0;
    border-radius:10px;
    background:#fff;
    align-items:center;
    box-sizing:border-box;
  }
  .item-row > :nth-child(1){grid-area:num;font-weight:850;align-self:start;padding-top:12px}
  .item-row > :nth-child(2){grid-area:desc;min-width:0;padding:0}
  .item-row > :nth-child(3){grid-area:qty}
  .item-row > :nth-child(4){grid-area:rate}
  .item-row > :nth-child(5){
    grid-area:amt;
    text-align:left !important;
    font-weight:800;
    font-size:15px;
    padding:6px 2px;
  }
  .item-row > :nth-child(6){
    grid-area:act;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-start;
  }
  .item-row .line-desc-cell input{
    width:100%;
    min-width:0;
  }
  .item-row .item-actions button{
    min-width:44px;min-height:44px;
    font-size:16px;
    border:1px solid #d8e2ed;
    border-radius:8px;
    background:#f8fbff;
    touch-action:manipulation;
  }
  .item-row .amt::before{
    content:"Amount ";
    font-weight:650;
    color:#52647d;
    font-size:12px;
  }
  .line-extra{grid-template-columns:1fr !important}
  .line-details > summary{
    min-height:44px;
    display:flex;
    align-items:center;
    font-size:14px;
  }
  .field-row,.settings-bottom,.settings-triple,.builder-bottom{grid-template-columns:1fr}
  .calc{width:100%}
  .party-contact-grid,.advanced-fields,.country-mode-fields{grid-template-columns:1fr}
  .payments,.template-choice{flex-wrap:wrap;gap:8px}
  .template-choice select{
    min-height:44px;
    font-size:16px;
    max-width:100%;
  }
}

/* Phones */
@media (max-width:640px){
  :root{--home-gutter:12px}
  .create-btn{display:none}
  .brand{font-size:17px;max-width:min(58vw,220px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  h1{font-size:clamp(28px,8.5vw,38px);letter-spacing:-.04em}
  .subtitle{font-size:15px}
  .benefits{gap:10px;flex-wrap:wrap}
  .benefit{flex:1 1 calc(50% - 10px);min-width:140px}
  .builder-card{padding:10px}
  .doc-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid8{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tool-card{min-height:96px}
  .steps{grid-template-columns:1fr}
  .step:not(:last-child):after{display:none}
  .quick-search{right:0;left:auto;width:min(320px,calc(100vw - 24px))}
  .preview-actions{grid-template-columns:1fr}
  .preview-actions .primary,
  .preview-actions button{grid-column:1 / -1}
}

@media (max-width:380px){
  .benefit{flex-basis:100%}
  .doc-tabs{grid-template-columns:1fr 1fr}
  .grid8{grid-template-columns:1fr}
  .brand{max-width:48vw}
}

/* Full horizontal nav only when there is enough room to avoid overlaps */
@media (min-width:1501px){
  .menu-btn{display:none !important}
  .navlinks{display:flex !important;overflow:visible}
  .navlinks.open{position:static;box-shadow:none;border:0;padding:0;flex-direction:row;background:transparent;overflow:visible}
}

/* Extra safety: never let mid-width nav paint under brand or actions */
@media (min-width:1501px) and (max-width:1600px){
  .navlinks{gap:10px;font-size:12px}
  .nav-actions{gap:8px}
  .create-btn{padding:0 12px;font-size:12px}
  .lang-switch select{max-width:104px}
}

body.dark-theme .navlinks.open{background:#182334;border-color:#334155}
body.dark-theme .mobile-preview-button{background:#203149;border-color:#3a5272;color:#9dc3ff}

/* Phase 5.2 — country / currency / payment / tax catalog panels */
.catalog-hint{
  margin:8px 0 0;
  font-size:12px;
  line-height:1.45;
  color:var(--muted,#64748b);
}
.payment-accept-panel,
.tax-preset-panel{margin-top:10px}
.payment-suggest-list{
  display:grid;
  gap:6px;
  max-height:220px;
  overflow:auto;
  padding:4px 2px;
  margin-top:6px;
}
.payment-suggest-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
  align-items:start;
  font-size:13px;
  line-height:1.35;
  margin:0;
  padding:6px 8px;
  border:1px solid color-mix(in srgb, var(--border,#dbe3ef) 85%, transparent);
  border-radius:8px;
  background:color-mix(in srgb, var(--panel,#fff) 92%, #e8eef8);
}
.payment-suggest-item small{
  display:block;
  margin-top:2px;
  color:var(--muted,#64748b);
  font-size:11px;
}
.payment-suggest-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:8px;
}
.payment-suggest-filter{flex:1 1 160px;min-width:0}
.payment-add-custom{font-size:12px;padding:6px 10px;white-space:nowrap}
.payment-suggest-block{display:grid;gap:6px}
.payment-method-details{
  display:grid;
  gap:6px;
  margin:0 0 4px 28px;
  padding:8px;
  border:1px dashed color-mix(in srgb, var(--border,#dbe3ef) 90%, transparent);
  border-radius:8px;
  background:color-mix(in srgb, var(--panel,#fff) 96%, #f1f5f9);
}
.payment-detail-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  margin:0;
}
body.dark-theme .payment-method-details{
  background:color-mix(in srgb, #1a2738 92%, #2a3f5c);
  border-color:#334155;
}
.tax-preset-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
}
.tax-preset-card{
  display:grid;
  gap:4px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb, var(--border,#dbe3ef) 85%, transparent);
  border-radius:8px;
  background:color-mix(in srgb, var(--panel,#fff) 92%, #e8eef8);
}
.tax-preset-meta{
  display:block;
  color:var(--muted,#64748b);
  font-size:11px;
  line-height:1.35;
}
.tax-preset-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.tax-preset-region{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  margin:0 0 6px;
}
.tax-preset-stale{
  color:#9a3412 !important;
  font-weight:600;
}
.tax-preset-btn{font-size:12px;padding:6px 10px}
body.dark-theme .tax-preset-card{
  background:color-mix(in srgb, #1a2738 90%, #2a3f5c);
  border-color:#334155;
}
.settings-triple label{display:flex;flex-direction:column;gap:4px;min-width:0}
@media (max-width:720px){
  .payment-suggest-list{max-height:180px}
}
body.dark-theme .payment-suggest-item{
  background:color-mix(in srgb, #1a2738 90%, #2a3f5c);
  border-color:#334155;
}
body.dark-theme .catalog-hint{color:#94a3b8}