:root{
--brand:#0F4D7A;
--brand-dark:#153c57;
--brand-soft:#edf6fb;
--accent:#4fc4da;
--ink:#1e394c;
--muted:#5c7486;
--line:#d6e4ec;
--card:#f8fbfd;
}

body{
margin:0;
font-family:Arial, sans-serif;
background:#f3f6f8;
color:var(--ink);
}

.packet{
display:flex;
flex-direction:column;
align-items:center;
padding:30px 0;
}

.page{
width:816px;
min-height:1056px;
background:white;
margin-bottom:25px;
padding:40px 60px;
box-shadow:0 5px 18px rgba(0,0,0,.12);
position:relative;
box-sizing: border-box;
}

.info-page{
background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
overflow:hidden;
}

.info-page::before{
content:"";
position:absolute;
top:-160px;
right:-110px;
width:360px;
height:360px;
border-radius:50%;
background:radial-gradient(circle, rgba(79, 196, 218, 0.16) 0%, rgba(79, 196, 218, 0) 72%);
pointer-events:none;
}

.info-page::after{
content:"";
position:absolute;
left:60px;
right:60px;
top:134px;
height:1px;
background:linear-gradient(90deg, rgba(15, 77, 122, 0.22), rgba(15, 77, 122, 0));
pointer-events:none;
}

/* HEADER */

.header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:18px;
margin-bottom:24px;
padding-bottom:18px;
border-bottom:1px solid #dbe7ef;
position:relative;
z-index:1;
}

.logo img{
max-height:62px;
}

.address{
font-size:12px;
line-height:1.6;
margin-top:0;
max-width:320px;
padding:10px 14px;
border:1px solid #d5e6ef;
border-radius:14px;
background:var(--brand-soft);
color:var(--muted);
text-align:right;
}

.address-line{
display:block;
}

.address-line + .address-line{
margin-top:2px;
}

.info-page .logo{
display:flex;
align-items:center;
}

/* TITLE */

.title{
font-size:31px;
font-weight:700;
line-height:1.04;
letter-spacing:-0.02em;
text-align:left;
margin-bottom:18px;
text-transform:none;
color:var(--brand-dark);
max-width:none;
position:relative;
z-index:1;
}

/* BODY */

.section{
margin-top:16px;
padding:18px 20px;
border:1px solid var(--line);
border-radius:18px;
background:linear-gradient(180deg, #ffffff 0%, var(--card) 100%);
position:relative;
z-index:1;
}

.section-title{
font-weight:700;
margin-bottom:10px;
font-size:19px;
color:var(--brand-dark);
letter-spacing:-0.01em;
}

.subsection-title{
font-weight:bold;
margin-top:15px;
margin-bottom:8px;
font-size:13px;
color:var(--brand);
}

.content-text{
font-size:13px;
line-height:1.7;
margin-bottom:10px;
text-align:left;
color:var(--muted);
}

ul{
margin:12px 0 0;
padding-left:22px;
}

li{
margin-bottom:7px;
font-size:13px;
line-height:1.55;
color:var(--muted);
}

li::marker{
color:var(--brand);
}

.note-box{
margin-top:30px;
padding:16px 18px;
background:linear-gradient(135deg, #f9fbfd 0%, #f3f8fb 100%);
border:1px solid #dde9ef;
border-left:4px solid var(--brand);
border-radius:0 14px 14px 0;
font-size:13px;
line-height:1.7;
color:var(--muted);
}

.guide-intro{
margin-top:24px;
padding:16px 18px;
background:linear-gradient(135deg, #eef6fb 0%, #f8fcff 100%);
border:1px solid #d3e4ee;
border-radius:14px;
font-size:13px;
line-height:1.7;
color:var(--muted);
position:relative;
z-index:1;
}

.guide-control-bar{
margin-top:18px;
padding:14px 16px;
border:1px solid #d6e5ee;
border-radius:16px;
background:#f8fbfd;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
position:relative;
z-index:1;
}

.guide-control-copy{
font-size:12px;
line-height:1.6;
color:var(--muted);
max-width:470px;
}

.guide-layout-switch{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.guide-layout-button{
border:1px solid #c8dbe8;
background:white;
color:var(--brand);
padding:10px 16px;
border-radius:999px;
font-size:12px;
font-weight:700;
cursor:pointer;
transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.guide-layout-button.active,
.guide-layout-button[aria-pressed="true"]{
background:var(--brand);
border-color:var(--brand);
color:white;
box-shadow:0 8px 18px rgba(15, 77, 122, 0.18);
}

.guide-hub-page{
min-height:auto;
}

.print-guide-page{
display:flex;
flex-direction:column;
gap:12px;
padding:18px 18px 22px;
min-height:auto;
}

.print-guide-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:18px;
}

.print-guide-copy{
margin:10px 0 0;
max-width:560px;
font-size:13px;
line-height:1.65;
color:#466072;
}

.print-guide-figure{
margin:0;
width:100%;
display:flex;
align-items:center;
justify-content:center;
}

.print-guide-figure img{
width:100%;
height:auto;
display:block;
border-radius:18px;
border:1px solid #d8e6ee;
box-shadow:0 12px 26px rgba(15, 77, 122, 0.08);
}

.print-guide-link-row{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
font-size:12px;
line-height:1.5;
color:#4b6677;
}

.print-guide-link{
color:var(--brand);
font-weight:700;
text-decoration:none;
word-break:break-word;
}

.print-guide-link:hover{
text-decoration:underline;
}

.guide-hub{
display:flex;
flex-direction:column;
gap:22px;
}

.guide-hub-header{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:18px;
padding-bottom:18px;
border-bottom:1px solid #dbe7ef;
}

.guide-kicker{
font-size:11px;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
color:#0F4D7A;
margin-bottom:8px;
}

.guide-heading{
margin:0;
font-size:26px;
line-height:1.15;
color:#153c57;
}

.guide-subtext{
margin:10px 0 0;
max-width:580px;
font-size:13px;
line-height:1.7;
color:#466072;
}

.guide-tabs{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.guide-tab{
border:1px solid #c8dbe8;
background:#f4f9fc;
color:#0F4D7A;
padding:10px 16px;
border-radius:999px;
font-size:13px;
font-weight:700;
cursor:pointer;
transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.guide-tab:hover{
background:#e6f1f8;
}

.guide-tab.active,
.guide-tab[aria-selected="true"]{
background:#0F4D7A;
border-color:#0F4D7A;
color:white;
box-shadow:0 8px 18px rgba(15, 77, 122, 0.18);
}

.guide-panel{
display:none;
}

.guide-panel.active{
display:block;
}

.guide-surface{
padding:26px;
border:1px solid #d8e6ee;
border-radius:20px;
background:linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
}

.guide-panel-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
margin-bottom:22px;
}

.guide-panel-title{
margin:0;
font-size:23px;
font-weight:700;
color:#153c57;
}

.guide-panel-note{
margin:8px 0 0;
max-width:580px;
font-size:13px;
line-height:1.6;
color:#4b6677;
}

.guide-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.guide-action{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border-radius:999px;
background:#0F4D7A;
color:white;
text-decoration:none;
font-size:12px;
font-weight:700;
white-space:nowrap;
}

.guide-overview{
margin-bottom:22px;
}

.guide-card{
padding:18px 20px;
border:1px solid #dce8ef;
border-radius:16px;
background:white;
}

.guide-card-title{
margin-bottom:14px;
font-size:15px;
font-weight:700;
color:#153c57;
}

.guide-card-body{
font-size:13px;
line-height:1.7;
color:#2f4757;
}

.guide-steps{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:12px;
}

.guide-step{
display:grid;
grid-template-columns:42px 1fr;
gap:12px;
align-items:flex-start;
padding:14px;
border:1px solid #dbeaf2;
border-radius:14px;
background:#f6fbfe;
}

.guide-step-number{
width:42px;
height:42px;
border-radius:50%;
background:#0F4D7A;
color:white;
font-size:17px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
}

.guide-step-title{
margin:2px 0 4px;
font-size:13px;
font-weight:700;
color:#163a56;
}

.guide-step-copy{
font-size:12px;
line-height:1.6;
color:#4b6677;
}

.protocol-table{
width:100%;
border-collapse:collapse;
font-size:12px;
}

.protocol-table th{
padding:11px 12px;
text-align:left;
background:#0F4D7A;
color:white;
font-size:12px;
}

.protocol-table td{
padding:10px 12px;
vertical-align:top;
border:1px solid #d9e6ee;
color:#264255;
}

.protocol-table tr:nth-child(even) td{
background:#f7fbfd;
}

.guide-inline-note{
margin-top:14px;
padding:12px 14px;
border:1px solid #d7e6ef;
border-radius:12px;
background:#eff7fb;
font-size:12px;
line-height:1.6;
color:#36556a;
}

.safety-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:14px;
margin-top:18px;
}

.safety-item{
min-height:100%;
}

/* PRINT BUTTON */

.print-button {
position:fixed;
top:20px;
right:20px;
background:#4CAF50;
color:white;
border:none;
padding:12px 20px;
font-size:14px;
cursor:pointer;
border-radius:5px;
box-shadow:0 2px 5px rgba(0,0,0,0.2);
display:flex;
align-items:center;
gap:8px;
z-index:1000;
}

.print-button:hover {
background:#45a049;
}

.guide-hub-page{
display:none;
}

.pdf-packet{
display:none;
}

.pdf-page{
background:white;
box-sizing:border-box;
}

.pdf-page--info{
padding:16px 18px 14px;
overflow:hidden;
}

.pdf-page--poster{
padding:18px 18px 22px;
display:flex;
flex-direction:column;
gap:12px;
}

.pdf-page-image{
display:block;
width:100%;
height:auto;
}

.pdf-page-image--info{
width:100%;
height:100%;
object-fit:contain;
object-position:top center;
}

.pdf-info-sheet{
position:relative;
width:100%;
height:100%;
padding:14px 16px 12px;
box-sizing:border-box;
background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
overflow:hidden;
}

.pdf-info-sheet::before{
content:"";
position:absolute;
top:-150px;
right:-105px;
width:330px;
height:330px;
border-radius:50%;
background:radial-gradient(circle, rgba(79, 196, 218, 0.16) 0%, rgba(79, 196, 218, 0) 72%);
pointer-events:none;
}

.pdf-info-sheet::after{
content:"";
position:absolute;
left:16px;
right:16px;
top:90px;
height:1px;
background:linear-gradient(90deg, rgba(15, 77, 122, 0.22), rgba(15, 77, 122, 0));
pointer-events:none;
}

.pdf-info-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
padding-bottom:10px;
border-bottom:1px solid #dbe7ef;
position:relative;
z-index:1;
}

.pdf-info-logo{
display:flex;
align-items:center;
}

.pdf-info-logo img{
width:250px;
height:auto;
}

.pdf-info-address{
max-width:290px;
padding:7px 11px;
border:1px solid #d5e6ef;
border-radius:14px;
background:var(--brand-soft);
color:var(--muted);
font-size:11px;
line-height:1.4;
text-align:right;
}

.pdf-info-title{
margin:12px 0 8px;
font-size:24px;
font-weight:700;
line-height:1.06;
letter-spacing:-0.02em;
color:var(--brand-dark);
position:relative;
z-index:1;
}

.pdf-info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px 10px;
position:relative;
z-index:1;
}

.pdf-info-card{
padding:10px 12px;
border:1px solid var(--line);
border-radius:16px;
background:linear-gradient(180deg, #ffffff 0%, var(--card) 100%);
}

.pdf-info-card--wide{
grid-column:1 / -1;
}

.pdf-info-card-title{
margin:0 0 6px;
font-size:13.5px;
font-weight:700;
color:var(--brand-dark);
letter-spacing:-0.01em;
}

.pdf-info-card p{
margin:0 0 6px;
font-size:10.6px;
line-height:1.34;
color:var(--muted);
}

.pdf-info-card p:last-child{
margin-bottom:0;
}

.pdf-info-card ul{
margin:5px 0 0;
padding-left:15px;
}

.pdf-info-card li{
margin-bottom:3px;
font-size:10.2px;
line-height:1.28;
color:var(--muted);
}

.pdf-info-card li:last-child{
margin-bottom:0;
}

.pdf-info-card li::marker{
color:var(--brand);
}

.pdf-info-list-two{
columns:2;
column-gap:18px;
}

.pdf-info-list-two li{
break-inside:avoid;
}

.pdf-info-foot{
margin-top:6px;
display:grid;
gap:6px;
position:relative;
z-index:1;
}

.pdf-info-note,
.pdf-info-guide{
padding:8px 10px;
border:1px solid #dde9ef;
border-radius:14px;
font-size:10.2px;
line-height:1.34;
color:var(--muted);
background:linear-gradient(135deg, #f9fbfd 0%, #f3f8fb 100%);
}

.pdf-info-note{
border-left:4px solid var(--brand);
border-radius:0 14px 14px 0;
}

.pdf-info-note strong,
.pdf-info-guide strong{
color:var(--brand-dark);
}

body.export-info{
margin:0;
background:#dfeaf1;
overflow:hidden;
}

body.export-info .print-button{
display:none;
}

body.export-info .packet{
padding:0;
align-items:flex-start;
}

body.export-info .page{
margin:0;
box-shadow:none;
}

body.export-info .page:not(.info-page){
display:none;
}

body.export-info .info-page{
width:960px;
min-height:auto;
padding:32px 44px 34px;
background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
overflow:visible;
}

body.export-info .info-page::after{
left:44px;
right:44px;
top:118px;
}

body.export-info .header{
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:18px;
padding-bottom:14px;
}

body.export-info .logo img{
max-height:56px;
}

body.export-info .address{
max-width:360px;
padding:10px 14px;
font-size:13px;
line-height:1.5;
text-align:right;
}

body.export-info .title{
font-size:30px;
margin-bottom:14px;
}

body.export-info .section{
margin-top:12px;
padding:14px 16px;
border-radius:16px;
}

body.export-info .section-title{
font-size:17px;
margin-bottom:8px;
}

body.export-info .subsection-title{
font-size:12px;
margin-top:12px;
margin-bottom:6px;
}

body.export-info .content-text,
body.export-info li{
font-size:12px;
line-height:1.45;
}

body.export-info .content-text{
margin-bottom:8px;
}

body.export-info ul{
margin-top:8px;
padding-left:20px;
}

body.export-info li{
margin-bottom:5px;
}

body.export-info .note-box,
body.export-info .guide-intro{
margin-top:14px;
padding:13px 14px;
font-size:12px;
line-height:1.5;
}

/* PRINT */

@page{
size:816px 1056px;
margin:0;
}

@media print{
.print-button,
.packet{
display:none !important;
}
html,
body{
margin:0;
padding:0;
background:white;
}
.pdf-packet{
display:block !important;
}
.pdf-page{
width:816px;
height:1056px;
min-height:1056px;
margin:0;
page-break-after:always;
break-after:page;
overflow:hidden;
}
.pdf-page:last-child{
page-break-after:auto;
break-after:auto;
}
}

/* SOP mobile overrides */
img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  body {
    padding: 0.5rem !important;
  }

  .packet {
    padding: 0.5rem 0 !important;
  }

  .page {
    width: 100% !important;
    min-height: auto !important;
    margin: 0 0 0.8rem !important;
    padding: 1rem !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
  }

  .container {
    max-width: 100% !important;
    border-radius: 12px !important;
  }

  .header,
  .guide-control-bar,
  .guide-hub-header,
  .guide-panel-header {
    flex-direction: column;
    align-items: stretch;
  }

  .address {
    max-width: 100%;
    text-align: left;
  }

  .title {
    font-size: 28px;
  }

  .guide-heading {
    font-size: 22px;
  }

  .guide-tabs {
    width: 100%;
  }

  .guide-tab {
    flex: 1 1 220px;
  }

  .guide-surface {
    padding: 18px;
    border-radius: 16px;
  }

  .guide-overview,
  .guide-steps,
  .safety-grid {
    grid-template-columns: 1fr;
  }

  .guide-actions {
    width: 100%;
  }

  .guide-action {
    width: 100%;
  }

  .protocol-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .page {
    padding: 0.78rem !important;
  }

  .title,
  .guide-heading {
    font-size: 1rem !important;
  }

  .section {
    padding: 14px;
  }

  .section-title {
    font-size: 16px;
  }

  .guide-step {
    grid-template-columns: 36px 1fr;
    padding: 12px;
  }

  .guide-step-number {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}

@media print {
  .page {
    box-shadow: none !important;
  }
}