/*
=========================================================
FILE: form_bands.css
VERSION: 1.2
PURPOSE: Global Sun / Sky / Grass band system
=========================================================
*/

.jd_band_hold_main
{
padding:0;
background:#ffffff;
margin-top:0;
}

.jd_band
{
position:relative;
overflow:hidden;
padding:clamp(2.2rem, 4vw, 3.8rem) 0;
}

/* ================= SUN ================= */

.jd_band_sun
{
background:linear-gradient(180deg, #d39b08 0%, #e0b11c 38%, #f0d14d 72%, #f8e68d 100%);
z-index:3;
box-shadow:0 10px 20px #666;filter:none;
}

.jd_band_sun::before,
.jd_band_sun::after
{
content:none;
}

/* ================= SKY (FORM) ================= */

.jd_band_sky
{
background:linear-gradient(180deg, #9fc7e8 0%, #b7d7f0 42%, #cfe6f7 100%);
border-top:1px solid #5f95bc;
border-bottom:1px solid #5f95bc;
z-index:2;
box-shadow:0 10px 20px #666;
}

/* ================= GRASS ================= */

.jd_band_grass
{
background:linear-gradient(180deg, #cfe4d0 0%, #dbead8 40%, #e7f1e3 100%);
padding-bottom:clamp(4.5rem, 7vw, 6.5rem);
}

/* =========================================================
   UNIVERSAL SUN / GRASS PANEL SYSTEM
========================================================= */

.jd_band_panel_grid
{
position:relative;
z-index:2;
display:grid;
gap:1.1rem;
align-items:stretch;
}

.jd_band_panel_main,
.jd_band_panel_side,
.jd_band_panel_mini,
.jd_band_panel_process,
.jd_band_panel_info,
.jd_band_panel_strip
{
position:relative;
z-index:2;
border-radius:1.55rem;
box-shadow:0 24px 50px rgba(17,17,17,0.16);
}

.jd_band_panel_main,
.jd_band_panel_side,
.jd_band_panel_mini,
.jd_band_panel_process,
.jd_band_panel_info,
.jd_band_panel_strip
{
background:#ffffff;
border:2px solid #7db8d3;
}

.jd_band_panel_main
{
padding:1.45rem;
}

.jd_band_panel_main h2
{
margin:0 0 0.9rem;
font-size:clamp(1.45rem, 2.55vw, 2.2rem);
line-height:1.1;
letter-spacing:-0.02em;
text-align:left;
}

.jd_band_panel_main .jd_band_lead
{
margin:0 0 0.9rem;
font-size:1.08rem;
line-height:1.72;
color:#111111;
max-width:56ch;
}

.jd_band_panel_main .jd_band_text,
.jd_band_panel_main .page_content
{
margin:0;
line-height:1.76;
color:#4f4f4f;
max-width:58ch;
}

.jd_band_panel_main .page_content p:last-child,
.jd_band_panel_info .page_content p:last-child
{
margin-bottom:0;
}

.jd_band_panel_side
{
padding:1.3rem 1.45rem 1.25rem;
}

.jd_band_panel_side h3,
.jd_band_panel_process h3,
.jd_band_panel_info h3,
.jd_band_panel_strip h3
{
margin:0 0 0.8rem;
font-size:1.28rem;
line-height:1.24;
text-align:center;
}

.jd_band_kicker_box
{
display:flex;
width:100%;
margin:0 0 1rem;
padding:0.78rem 1rem;
border-radius:1rem;
background:#7db8d3;
border:2px solid #23566d;
color:#ffffff;
box-shadow:0 10px 22px rgba(35,86,109,0.22);
font-size:0.9rem;
font-weight:600;
letter-spacing:0.04em;
text-align:center;
justify-content:center;
}

.jd_band_tick_list,
.jd_band_plain_list
{
margin:0;
padding:0;
list-style:none;
}

.jd_band_tick_list li,
.jd_band_plain_list li
{
position:relative;
padding-left:1.75rem;
margin-bottom:0.82rem;
line-height:1.64;
color:#111111;
}

.jd_band_tick_list li:last-child,
.jd_band_plain_list li:last-child
{
margin-bottom:0;
}

.jd_band_tick_list li::before
{
content:"✓";
position:absolute;
left:0;
top:0.02rem;
font-weight:700;
color:#4f93aa;
}

.jd_band_plain_list li::before
{
content:"•";
position:absolute;
left:0;
top:0;
font-weight:700;
font-size:1.15rem;
line-height:1;
color:#67a852;
}

.jd_band_panel_strip_grid
{
position:relative;
z-index:2;
display:grid;
gap:1rem;
margin-top:1.2rem;
}

.jd_band_panel_mini
{
padding:1.15rem 1.15rem 1.08rem;
background:#fff1b5;
text-align:center;
box-shadow:0 20px 38px rgba(0,0,0,0.18);
}

.jd_band_panel_mini strong
{
display:block;
margin-bottom:0.32rem;
font-size:1rem;
}

.jd_band_panel_mini span
{
display:block;
font-size:0.94rem;
line-height:1.55;
color:#494949;
}

.jd_band_panel_mini a,
.jd_band_panel_side a,
.jd_band_panel_info a
{
color:#23566d;
text-decoration:underline;
}

.jd_band_bottom_intro
{
text-align:center;
margin-bottom:2rem;
}

.jd_band_bottom_intro h2
{
font-size:clamp(1.6rem, 2.4vw, 2rem);
margin:0 0 0.5rem;
}

.jd_band_bottom_intro p
{
font-size:1rem;
color:#444444;
margin:0;
}

.jd_band_bottom_layout
{
display:grid;
grid-template-columns:2fr 1fr;
gap:1.5rem;
align-items:stretch;
}

.jd_band_panel_process,
.jd_band_panel_info,
.jd_band_panel_strip
{
border-radius:1.25rem;
box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

.jd_band_panel_process
{
padding:1.5rem;
}

.jd_band_steps
{
display:flex;
flex-direction:column;
gap:1.2rem;
}

.jd_band_step
{
display:flex;
gap:0.9rem;
align-items:flex-start;
}

.jd_band_step_no
{
width:34px;
height:34px;
border-radius:50%;
background:#f2b300;
color:#111111;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
box-shadow:0 8px 16px rgba(17,17,17,0.12);
}

.jd_band_step_text strong
{
display:block;
margin-bottom:0.25rem;
line-height:1.42;
}

.jd_band_step_text p
{
margin:0;
line-height:1.68;
color:#575757;
}

.jd_band_side_cards
{
display:flex;
flex-direction:column;
gap:1.5rem;
}

.jd_band_panel_info
{
padding:1.45rem;
background:linear-gradient(180deg, #ffffff 0%, #fafffa 100%);
}

.jd_band_panel_info p
{
margin:0;
line-height:1.74;
color:#535353;
}

.jd_band_panel_info .page_content
{
font-size:0.98rem;
line-height:1.8;
}

.jd_band_panel_strip
{
margin-top:1.5rem;
padding:1.15rem 1.5rem;
text-align:center;
}

.jd_band_panel_strip p
{
margin:0;
line-height:1.7;
color:#4d4d4d;
}

@media (min-width: 768px)
{
.jd_band_panel_grid
{
grid-template-columns:minmax(0, 2fr) minmax(0, 1.35fr);
}

.jd_band_panel_strip_grid
{
grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
}
}

@media (max-width: 900px)
{
.jd_band_bottom_layout
{
grid-template-columns:1fr;
}

.jd_band_panel_strip
{
padding:1.15rem 1.1rem;
}
}

@media (min-width: 1040px)
{
.jd_band_panel_main
{
padding:1.6rem;
}

.jd_band_panel_side
{
padding:1.3rem 1.45rem 1.3rem;
}

.jd_band_panel_info
{
padding:1.5rem;
}
}