.trial-layout { max-width: 1180px; margin-inline: auto; }
.trial-layout main { min-width: 0; }
.trial-card { margin-block: 16px; }
.trial-card > :first-child { margin-top: 0; }
.trial-card > :last-child { margin-bottom: 0; }
.trial-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); gap: 14px; }
.trial-grid > .trial-card { margin: 0; }
.trial-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.trial-actions .btn { white-space: normal; }
.trial-layout fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.trial-layout legend { font-weight: 600; margin-bottom: 12px; }
.trial-layout .field { margin: 0 0 14px; }
.trial-layout .field input,.trial-layout .field select,.trial-layout .field textarea { width: 100%; min-width: 0; }
.trial-layout input[type="file"] { max-width: 100%; }
.trial-layout video { width: 100%; max-height: 360px; margin-block: 12px; background: #101010; }
.trial-layout .trial-notice { background: var(--surface); border: 1px solid var(--line); padding: 12px 16px; border-radius: 12px; margin-top: 22px; }
.trial-layout .trial-notice summary { cursor:pointer; font-weight:600; }
.trial-message { min-height: 1.6em; margin: 10px 0 0; }
.trial-days { display:flex; flex-wrap:wrap; gap:6px; padding:0; list-style:none; }
.trial-days li { padding:5px 9px; border:1px solid var(--line); border-radius:8px; }
.trial-days li[aria-current="step"] { border-color:#5a763c; font-weight:700; }
.trial-hero { background: #e6efdb; color:#26331c; padding:clamp(22px,5vw,42px); border-radius:20px; }
.trial-hero h2 { margin: 10px 0 4px; font-size:clamp(26px,5vw,42px); }
.trial-hero p { margin: 5px 0; }
.trial-heading { margin-bottom: 16px; }
.trial-heading h1 { margin: 4px 0; font-size:clamp(28px,5vw,44px); line-height:1.15; }
.trial-heading p { margin: 6px 0; }
.trial-subtitle { margin-top:24px; }
.trial-status { font-weight:600; color:#52663a; }
.trial-layout button:disabled { opacity:.6; cursor:not-allowed; }
@media (max-width:540px) {
  .trial-layout .sidebar nav { display:flex; flex-wrap:wrap; gap:4px; }
  .trial-layout .nav-link { font-size: 12px; padding: 8px 7px; }
  .trial-layout input,.trial-layout select,.trial-layout textarea { font-size:16px; }
}

.trial-parcel { display:block; width:76px; height:76px; margin:0 0 14px; }

.trial-flavor-hero { display:grid; grid-template-columns:minmax(0,1fr) 205px; align-items:center; gap:16px; background:var(--fruit-bg); color:#26271e; }
.trial-flavor-hero h2 { color:var(--fruit-fg); }
.trial-pack { position:relative; min-height:265px; }
.trial-pack .stick { left:94px; }
.trial-pack .stick.back { left:43px; }
.trial-pack .stick-taste { color:var(--fruit-fg); }
.trial-pack-fruit { position:absolute; right:8px; top:0; }
.trial-pack-fruit .taste-bubble { width:145px; height:145px; background:#ffffff75; }
.trial-pack-fruit .icon { width:100px; height:100px; opacity:.5; }
.trial-stage-title { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.trial-stage-title h2 { margin:0; }
.trial-stage-title .taste-bubble { width:46px; height:46px; flex:none; }
.trial-stage-title .taste-bubble .icon { width:26px; height:26px; }
.trial-route { padding-left:16px; border-left:2px solid #dce4d2; }
.trial-stage { position:relative; max-width:none; border-top:5px solid var(--fruit-bg); }
.trial-stage::before { content:''; position:absolute; left:-23px; top:27px; width:10px; height:10px; border-radius:50%; background:var(--fruit-fg); }
.trial-stage[aria-current="step"] { background:var(--fruit-bg); }
.trial-stage .trial-days li.done, .trial-stage .trial-days li[aria-current="step"] { background:var(--fruit-fg); color:white; }
@media (max-width:540px) {
  .trial-flavor-hero { grid-template-columns:minmax(0,1fr) 86px; gap:4px; }
  .trial-pack { min-height:205px; }
  .trial-pack .stick { left:33px; top:26px; scale:.63; transform-origin:top left; }
  .trial-pack .stick.back { left:5px; top:38px; }
  .trial-pack-fruit { right:-8px; top:0; }
  .trial-pack-fruit .taste-bubble { width:83px; height:83px; }
  .trial-pack-fruit .icon { width:60px; height:60px; }
}

.trial-rating h2 { margin-bottom: 4px; }
.trial-rating .trial-score-row { min-width: 0; margin-top: 16px; padding: 12px; border-radius: 14px; background: var(--fruit-bg); }
.trial-score-row legend { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 6px; color: var(--fruit-fg); }
.trial-score-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 340px; }
.trial-score { position: relative; display: grid; place-items: center; cursor: pointer; }
.trial-score input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.trial-score span { display: grid; place-items: center; width: 100%; min-height: 44px; max-width: 54px; border: 1px solid var(--fruit-fg); border-radius: 50px; background: #fff; color: var(--fruit-fg); font-weight: 700; }
.trial-score input:checked + span { background: var(--fruit-fg); color: #fff; }
.trial-score input:focus-visible + span { outline: 2px solid #252521; outline-offset: 2px; }

.trial-celebration { display: block; font-size: 44px; line-height: 1.15; }
.trial-promo { background: #fff; border-radius: 12px; padding: 12px 16px; margin-top: 16px !important; }
.trial-promo strong { display: block; font-size: 1.2rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.trial-promo small { display: block; }

/* The section receives focus after navigation so screen readers can read it. */
.trial-layout > #main:focus { outline: none; }

.lab-workspace { width: min(960px, calc(100% - 36px)); margin: 28px auto; }
.lab-workspace .form-card { max-width: none; margin-bottom: 16px; }
.lab-workspace ul { padding-left: 22px; }
.lab-workspace li { margin-bottom: 10px; }

.trial-guide { max-width: none; }
.trial-guide-list { display: grid; gap: 14px; margin: 16px 0; padding: 0; list-style: none; }
.trial-guide-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.trial-guide-list li > span { display: grid; place-items: center; height: 24px; border-radius: 50%; background: #e4eed8; color: #395426; font-weight: 700; }
.trial-guide-list p { margin: 2px 0 0; line-height: 1.5; }
.trial-guide a { text-decoration: underline; text-underline-offset: .15em; }
.trial-guide .trial-guide-video { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line, #dce1d6); }

.video-tip { display: flex; gap: .8rem; align-items: flex-start; background: #eaf2e2; border-radius: .75rem; padding: 1rem; margin: 0 0 1rem; }
.video-tip p { margin: .2rem 0 0; }
.video-task { display: flex; flex-direction: column; }
.video-task > :last-child { margin-top: auto; align-self: flex-start; }
.video-art { display: grid; place-items: center; min-height: 5rem; border-radius: .65rem; margin-bottom: 1rem; background: var(--fruit-bg, #eaf2e2); }
.video-art .taste-bubble { background: #fff; color: var(--fruit-fg, #365830); }

.profile-card { border-block-start: 4px solid var(--profile-accent); }
.profile-person { --profile-tint:#eaf3df; --profile-accent:#a2c47f; --profile-ink:#35572b; }
.profile-delivery { --profile-tint:#ffebd3; --profile-accent:#ffc484; --profile-ink:#834619; }
.profile-start { --profile-tint:#f2e9fa; --profile-accent:#cba9e2; --profile-ink:#673f81; }
.profile-card-title { display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; margin:0 0 1rem; border-radius:.65rem; background:var(--profile-tint); color:var(--profile-ink); }
.profile-card-title h2 { margin:0; font-size:clamp(1.05rem, 3vw, 1.35rem); }
.profile-card-title span { display:grid; place-items:center; flex:none; width:2.4rem; height:2.4rem; background:#fff; border-radius:50%; }
.profile-card-title svg { width:1.35rem; height:1.35rem; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linejoin:round; stroke-linecap:round; }