/* caskaid.uk with FRED doing the explaining (index.html). Builds on css/site.css. */
.fred-meet{ padding:72px 0; background:var(--cream); }
.fred-meet .wrap{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:48px; align-items:start; }
.fred-who{ text-align:center; position:sticky; top:96px; }
.fred-who img{ width:180px; height:180px; margin:0 auto 14px; border-radius:50%; background:var(--sky-soft); box-shadow:0 0 0 6px #fff, var(--shadow); }
.fred-who h2{ font-size:clamp(28px,3.4vw,38px); }
.fred-who p{ color:var(--muted); font-size:15px; margin:8px auto 0; max-width:260px; }
.fred-chat{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; min-width:0; }
.fred-log{ display:flex; flex-direction:column; gap:10px; }
.fred-row{ display:flex; gap:10px; align-items:flex-end; }
.fred-row img{ width:34px; height:34px; border-radius:50%; flex:none; background:var(--sky-soft); }
.fred-row.me{ justify-content:flex-end; }
.fred-bub{ background:var(--grey); border-radius:18px 18px 18px 5px; padding:12px 16px; max-width:88%; min-width:0; }
.fred-bub p{ margin:0 0 8px; } .fred-bub p:last-child{ margin:0; }
.fred-bub a{ font-weight:600; }
.fred-row.me .fred-bub{ background:var(--navy); color:#fff; border-radius:18px 18px 5px 18px; }
.fred-typing{ display:inline-flex; gap:4px; padding:4px 0; } .fred-typing i{ width:7px; height:7px; border-radius:50%; background:var(--faint); animation:fredDot 1s infinite; }
.fred-typing i:nth-child(2){ animation-delay:.15s; } .fred-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes fredDot{ 0%,60%,100%{ opacity:.3; transform:none; } 30%{ opacity:1; transform:translateY(-3px); } }
.fred-qs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.fred-qs button{ font:inherit; font-size:15px; font-weight:600; color:var(--navy); background:#fff; border:2px solid rgba(15,76,104,.3); border-radius:999px; padding:9px 15px; cursor:pointer; text-align:left; }
.fred-qs button:hover{ border-color:var(--navy); }
.fred-qs button.asked{ color:var(--faint); border-color:var(--line); }
/* Without scripts, every answer is simply listed. */
.fred-all{ display:grid; gap:14px; }
.fred-all h3{ font-size:18px; font-family:'IBM Plex Sans',sans-serif; font-weight:600; margin-bottom:4px; }
.js .fred-all{ display:none; }
@media (max-width:860px){ .fred-meet .wrap{ grid-template-columns:1fr; gap:24px; } .fred-who{ position:static; display:flex; gap:16px; align-items:center; text-align:left; }
  .fred-who img{ width:84px; height:84px; margin:0; flex:none; } .fred-who p{ margin:4px 0 0; max-width:none; } }
@media (max-width:600px){ .fred-meet{ padding:48px 0; } .fred-chat{ padding:16px; } }
@media (prefers-reduced-motion:reduce){ .fred-typing i{ animation:none; } }

/* Five perks */
.perks{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:18px; margin-top:40px; }
.perk{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.perk .ico{ width:48px; height:48px; border-radius:14px; background:var(--sky-soft); display:grid; place-items:center; font-size:24px; }
.perk h3{ font-size:22px; }
.perk p{ color:var(--muted); margin:0; }
.perk .tip{ margin-top:auto; display:flex; gap:10px; align-items:flex-start; background:var(--amber-soft); border-radius:12px; padding:10px 12px; font-size:15px; color:var(--text); }
.perk .tip img{ width:28px; height:28px; border-radius:50%; flex:none; }
.perk.fred-perk{ background:var(--navy); color:#fff; border-color:var(--navy); }
.perk.fred-perk p{ color:rgba(255,255,255,.82); } .perk.fred-perk .ico{ background:rgba(255,255,255,.12); }
.perk.fred-perk .ico img{ width:44px; height:44px; border-radius:50%; }
.more-list{ margin-top:28px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.more-list summary{ cursor:pointer; padding:18px 22px; font-weight:600; color:var(--navy); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.more-list summary::-webkit-details-marker{ display:none; }
.more-list summary::after{ content:'+'; font-size:22px; line-height:1; } .more-list[open] summary::after{ content:'−'; }
.more-list ul{ margin:0; padding:0 22px 22px; list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:12px 24px; }
.more-list li{ font-size:15.5px; color:var(--muted); } .more-list li b{ display:block; color:var(--text); font-size:16px; }
.small-print{ font-size:13.5px; color:var(--faint); margin-top:18px; text-align:center; }

/* Also from us */
.also{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:16px; margin-top:32px; }
.also a{ display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; }
.also a:hover{ border-color:var(--navy); }
.also b{ display:block; font-family:'Fraunces',Georgia,serif; font-size:20px; color:var(--navy); margin-bottom:4px; }
.also span{ color:var(--muted); font-size:15px; }
.final .fred-sign{ display:flex; gap:12px; align-items:center; justify-content:center; margin:18px auto 0; max-width:560px; text-align:left; color:rgba(255,255,255,.85); font-size:16px; }
.final .fred-sign img{ width:52px; height:52px; border-radius:50%; background:#fff; flex:none; }
/* Desktop: three across, then the last two share the row (so nothing sits alone). */
@media (min-width:900px){ .perks{ grid-template-columns:repeat(6, minmax(0,1fr)); } .perk{ grid-column:span 2; } .perk:nth-child(4), .perk:nth-child(5){ grid-column:span 3; } }
.soon{ align-self:flex-start; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); background:var(--amber-soft); border-radius:999px; padding:3px 10px; }
.perk.fred-perk .soon{ color:#fff; background:rgba(255,255,255,.16); }