/* Σύγκριση επενδυτικών πλατφορμών. From mockups/investment-platform-comparison-2026-10-22/styles.css, the approved design,
   scoped to .smpc with every class prefixed smpc-, on the production palette and type in spec/brand.md. */
/* Σύγκριση επενδυτικών πλατφορμών, mock-up. Tokens and card pattern from the live current-account comparison
   (plugin/simplymoney-account-comparison/assets/account-comparison.css), on the palette and type in spec/brand.md. */
.smpc{--petrol:#0e5a53;--petrol-dark:#084943;--petrol-tint:#e7f0ee;--gold:#cc9a3d;--gold-ink:#96711f;--gold-tint:#fbf0dc;--border:#e7e1d6;--sand:#f4f1ee;--canvas:#fbfaf8;--card:#fff;--ink:#1a1a1a;--ink-soft:#3f3c38;--muted:#5f5b56;--muted-light:#9a948a;--green-ink:#14734c;--red-ink:#a64b45;--red-tint:#f8e9e7;--blue-bg:#e4eeff;--blue-ink:#24558e;--sans:"Noto Sans",Arial,sans-serif;--serif:Literata,Georgia,serif}
.smpc *{box-sizing:border-box}
.smpc [hidden]{display:none!important}
.smpc a{color:inherit;text-decoration:none}
.smpc button,.smpc input,.smpc select{font:inherit;color:inherit}
.smpc svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.smpc :focus-visible{outline:3px solid rgba(14,90,83,.55);outline-offset:3px}
.smpc fieldset{border:0;margin:0;padding:0;min-width:0}
.smpc legend{padding:0}
.smpc .smpc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* the title stays on one line: in Literata it is about 17,6 times its font size wide (measured on the live page), so it takes
   1/18 of the comparison's own width, at most 44px */
.smpc h1{font-size:28px;line-height:1.15;letter-spacing:-.03em;margin:0 0 22px;font-weight:700}
@supports (font-size:1cqi){
  .smpc{container-type:inline-size}
  .smpc h1{font-size:min(44px,5.55cqi);white-space:nowrap}
}
.smpc .smpc-eyebrow{font:600 12px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 12px}

/* the two doors */
.smpc .smpc-doors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.smpc .smpc-door{position:relative;display:flex;flex-direction:column;gap:10px;text-align:left;padding:20px 22px 18px;border:1px solid var(--border);border-radius:16px;background:var(--card);cursor:pointer}
.smpc .smpc-door:hover{border-color:#cfc7b8}
.smpc .smpc-door[aria-selected="true"]{border-color:var(--petrol);background:var(--petrol-tint);box-shadow:inset 0 0 0 1px var(--petrol)}
.smpc .smpc-door-top{display:flex;align-items:center;gap:12px}
.smpc .smpc-door-icon{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--sand);color:var(--ink-soft)}
.smpc .smpc-door[aria-selected="true"] .smpc-door-icon{background:var(--petrol);color:#fff}
.smpc .smpc-door-icon svg{width:22px;height:22px}
.smpc .smpc-door-title{display:block;margin:0;padding-right:30px;font:700 21px/1.25 var(--sans);letter-spacing:-.01em} /* clear of the check circle */
.smpc .smpc-door-legal{display:block;font:500 13px/1.35 var(--sans);color:var(--muted);margin-top:2px}
.smpc .smpc-door ul{margin:0;padding:0;list-style:none;font:500 14px/1.45 var(--sans);color:var(--ink-soft)}
.smpc .smpc-door li{position:relative;padding-left:18px;margin:3px 0}
.smpc .smpc-door li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.smpc .smpc-door-figure{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);font:500 14px/1.4 var(--sans);color:var(--muted)}
.smpc .smpc-door-figure strong{display:block;font:700 22px/1.2 var(--sans);color:var(--ink)}
.smpc .smpc-door-check{position:absolute;top:16px;right:16px;width:24px;height:24px;border-radius:50%;border:2px solid var(--border);background:#fff}
.smpc .smpc-door[aria-selected="true"] .smpc-door-check{border-color:var(--petrol);background:var(--petrol);box-shadow:inset 0 0 0 4px #fff}

.smpc .smpc-drag{display:flex;gap:18px;align-items:flex-start;margin:0 0 30px;padding:14px 18px;border-radius:12px;background:var(--sand);font:500 14px/1.5 var(--sans);color:var(--ink-soft)}
.smpc .smpc-drag svg{flex:none;width:22px;height:22px;color:var(--petrol);margin-top:1px}
.smpc .smpc-drag p{margin:0}
.smpc .smpc-drag strong{color:var(--ink)}
.smpc .smpc-drag a{color:var(--petrol);font-weight:600}

/* «Καλύτερη για» strip */
.smpc .smpc-picks{margin-bottom:30px}
.smpc .smpc-picks-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px}
.smpc .smpc-picks-head h2{margin:0;font:700 22px/1.25 var(--sans);letter-spacing:-.01em}
.smpc .smpc-picks-head button{border:0;background:none;padding:6px 0;color:var(--petrol);font:600 14px/1.3 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.smpc .smpc-picks-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.smpc .smpc-picks-grid.smpc-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.smpc .smpc-pick{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid #ecd9b2;border-radius:14px;background:linear-gradient(180deg,var(--gold-tint),#fff 70%);text-decoration:none}
.smpc .smpc-pick-for{font:600 12px/1.35 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
.smpc .smpc-pick-name{display:flex;align-items:center;gap:10px;font:700 18px/1.2 var(--sans)}
.smpc .smpc-pick-figure{font:500 14px/1.4 var(--sans);color:var(--ink-soft)}
.smpc .smpc-pick-figure b{color:var(--ink)}
.smpc .smpc-pick-rule{margin-top:auto;font:500 12.5px/1.45 var(--sans);color:var(--muted)}
.smpc .smpc-picks-rules{margin:12px 0 0;padding:14px 18px;border:1px solid var(--border);border-radius:12px;background:#fff;font:500 14px/1.55 var(--sans);color:var(--ink-soft)}
.smpc .smpc-picks-rules ul{margin:6px 0 0;padding-left:20px}

/* layout: side column + results */
.smpc .smpc-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}
.smpc .smpc-side{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px}
.smpc .smpc-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 20px}
.smpc .smpc-box legend{font:600 12px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 10px}
.smpc .smpc-box fieldset+fieldset{margin-top:16px;padding-top:16px;border-top:1px solid var(--sand)}
.smpc .smpc-profiles{display:flex;flex-direction:column;gap:8px}
.smpc .smpc-profile{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;cursor:pointer;background:#fff}
.smpc .smpc-profile input{position:absolute;opacity:0;pointer-events:none}
.smpc .smpc-profile strong{display:block;font:650 14.5px/1.3 var(--sans)}
.smpc .smpc-profile:has(input:checked){border-color:var(--petrol);background:var(--petrol-tint);box-shadow:inset 0 0 0 1px var(--petrol)}
.smpc .smpc-profile:has(input:focus-visible){outline:3px solid rgba(14,90,83,.55);outline-offset:2px}
.smpc .smpc-p-icon{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--sand);color:var(--ink-soft)}
.smpc .smpc-profile:has(input:checked) .smpc-p-icon{background:var(--petrol);color:#fff}
.smpc .smpc-p-icon svg{width:18px;height:18px}
.smpc .smpc-edit-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;border:0;background:none;padding:4px 0;color:var(--petrol);font:600 14px/1.3 var(--sans);cursor:pointer}
.smpc .smpc-edit-link svg{width:16px;height:16px}
.smpc .smpc-assume{margin:8px 0 0;font:500 12.5px/1.5 var(--sans);color:var(--muted)}
.smpc .smpc-amount{display:flex;flex-direction:column;gap:8px}
.smpc .smpc-amount output{font:700 26px/1.1 var(--sans)}
.smpc .smpc-amount input[type=range]{width:100%;accent-color:var(--petrol)}
.smpc .smpc-amount .smpc-scale{display:flex;justify-content:space-between;font:500 12px/1 var(--sans);color:var(--muted)}
.smpc .smpc-chips{display:flex;flex-wrap:wrap;gap:8px}
.smpc .smpc-chip{position:relative;display:block}
.smpc .smpc-chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.smpc .smpc-chip span{display:flex;align-items:center;gap:6px;min-height:36px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;font:600 13px/1.2 var(--sans);color:var(--ink-soft)}
.smpc .smpc-chip input:checked+span{border-color:var(--petrol);background:var(--petrol-tint);color:var(--petrol-dark)}
.smpc .smpc-chip input:checked+span::before{content:"✓";font-weight:700}
.smpc .smpc-chip input:focus-visible+span{outline:3px solid rgba(14,90,83,.55);outline-offset:2px}
.smpc .smpc-checked{font:500 13px/1.4 var(--sans);color:var(--muted);margin:0 2px}
.smpc .smpc-checked b{color:var(--ink)}

.smpc .smpc-results-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.smpc .smpc-results-bar h2{margin:0;font:700 22px/1.25 var(--sans);letter-spacing:-.01em}
.smpc .smpc-seg{display:inline-flex;background:var(--sand);border-radius:999px;padding:4px;gap:2px}
.smpc .smpc-seg label{position:relative;display:block}
.smpc .smpc-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.smpc .smpc-seg span{display:flex;align-items:center;min-height:36px;padding:7px 13px;border-radius:999px;font:600 13px/1.1 var(--sans);color:var(--ink-soft);white-space:nowrap}
.smpc .smpc-seg input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(26,26,26,.12)}
.smpc .smpc-sort-label{font:600 12px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink);margin-right:10px}
.smpc .smpc-disclosure{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:12px 16px;border-radius:12px;background:var(--petrol-tint);font:500 14px/1.5 var(--sans);color:var(--ink-soft)}
.smpc .smpc-disclosure svg{flex:none;width:20px;height:20px;color:var(--petrol);margin-top:1px}

/* cards */
.smpc .smpc-cards{display:flex;flex-direction:column;gap:14px}
.smpc .smpc-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 20px 14px}
.smpc .smpc-card.is-pick{border-color:#e3c98f;box-shadow:0 0 0 1px #ecd9b2}
.smpc .smpc-card.is-off{opacity:.62}
.smpc .smpc-card-top{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:16px;align-items:start;margin-bottom:14px}
.smpc .smpc-who{display:flex;gap:12px;align-items:flex-start}
.smpc .smpc-mono{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--sand);font:700 14px/1 var(--sans);color:var(--ink-soft);letter-spacing:.02em}
.smpc .smpc-logo{flex:none;width:40px;height:40px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--card)}
.smpc .smpc-logo img{display:block;width:100%;height:100%;object-fit:cover}
.smpc .smpc-who h3{margin:0;font:700 18px/1.25 var(--sans)}
.smpc .smpc-entity{display:block;font:500 13px/1.4 var(--sans);color:var(--muted)}
.smpc .smpc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.smpc .smpc-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font:600 12px/1.3 var(--sans);background:var(--sand);color:var(--ink-soft)}
.smpc .smpc-tag-gr{background:var(--blue-bg);color:var(--blue-ink)}

.smpc .smpc-tag-best{background:var(--gold);color:#fff;padding:4px 10px}
.smpc .smpc-tag-best svg{width:13px;height:13px;stroke-width:2.4}
.smpc .smpc-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.smpc .smpc-go{display:flex;justify-content:center;align-items:center;gap:8px;min-height:42px;border:1px solid var(--petrol);border-radius:10px;color:var(--petrol);text-decoration:none;font:600 14px/1 var(--sans)}
.smpc .smpc-go svg{width:15px;height:15px}
.smpc .smpc-more{border:0;background:none;color:var(--petrol);font:600 13px/1.3 var(--sans);cursor:pointer;padding:4px}
.smpc .smpc-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.smpc .smpc-fig{padding:11px 13px;border-radius:12px;background:#faf8f3;border:1px solid #efe9de}
.smpc .smpc-fig-label{display:block;font:600 11px/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:4px}
.smpc .smpc-fig-value{display:block;font:700 22px/1.2 var(--sans)}
.smpc .smpc-fig-note{display:block;font:500 12.5px/1.4 var(--sans);color:var(--muted);margin-top:3px}
.smpc .smpc-fig-note.is-excl{color:var(--blue-ink)}
.smpc .smpc-fig-note.is-warn{color:var(--red-ink)}
.smpc .smpc-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 2px}
.smpc .smpc-fact-label{display:block;font:600 11px/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.smpc .smpc-fact{font:500 13.5px/1.45 var(--sans);color:var(--ink-soft)}
.smpc .smpc-yes{color:var(--green-ink);font-weight:650}
.smpc .smpc-no{color:var(--muted)}
.smpc .smpc-extra{margin-top:12px;border-top:1px solid var(--sand);padding-top:8px}
.smpc .smpc-extra summary{cursor:pointer;font:600 12px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink);padding:4px 0;list-style:none}
.smpc .smpc-extra summary::-webkit-details-marker{display:none}
.smpc .smpc-extra summary::after{content:" ⌄"}
.smpc .smpc-extra[open] summary::after{content:" ⌃"}
.smpc .smpc-extra .smpc-facts{margin-top:10px}
.smpc .smpc-breakdown{grid-column:1/-1;font:500 13px/1.5 var(--sans);color:var(--muted);background:var(--sand);border-radius:10px;padding:10px 12px}
.smpc .smpc-baseline{margin-top:10px;font:500 13px/1.45 var(--sans);color:var(--muted)}
.smpc .smpc-baseline b{color:var(--ink)}

.smpc .smpc-notes{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.smpc .smpc-note{padding:12px 16px;border-radius:12px;background:#fff;border:1px dashed #d8d0c2;font:500 14px/1.5 var(--sans);color:var(--ink-soft)}
.smpc .smpc-note strong{color:var(--ink)}
.smpc .smpc-group-head{margin:22px 0 4px;font:700 18px/1.3 var(--sans)}
.smpc .smpc-group-sub{margin:0 0 12px;font:500 14px/1.5 var(--sans);color:var(--muted)}

/* lower blocks */
.smpc .smpc-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.smpc .smpc-block{padding:22px 24px;border-radius:16px;background:#faf8f4;border:1px solid var(--border);font-size:15.5px}
.smpc .smpc-block h2{margin:0 0 12px;font:700 15px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
.smpc .smpc-block p,.smpc .smpc-block li{margin:0 0 10px}
.smpc .smpc-block ul,.smpc .smpc-block ol{padding-left:20px;margin:0}
.smpc .smpc-faq{max-width:820px;margin:44px auto 0}
.smpc .smpc-faq h2{font-size:30px;margin:0 0 14px}
.smpc .smpc-faq details{border-bottom:1px solid var(--border);padding:14px 0}
.smpc .smpc-faq summary{cursor:pointer;font:650 17px/1.4 var(--sans)}
.smpc .smpc-faq p{margin:10px 0 0;color:var(--ink-soft)}

@media (max-width:1099px){
  .smpc .smpc-layout{grid-template-columns:minmax(0,1fr)}
  .smpc .smpc-side{position:static;display:grid;grid-template-columns:1fr 1fr}
  .smpc .smpc-side .smpc-checked{grid-column:1/-1}
  .smpc .smpc-profiles{display:grid;grid-template-columns:1fr 1fr}
  .smpc .smpc-picks-grid{grid-template-columns:1fr 1fr}
  .smpc .smpc-picks-grid.smpc-n3{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:760px){
  .smpc .smpc-doors{grid-template-columns:1fr;gap:10px}
  .smpc .smpc-door{padding:16px 16px 14px}
  .smpc .smpc-door ul{display:none}
  .smpc .smpc-door[aria-selected="true"] ul{display:block}
  .smpc .smpc-door-title{font-size:18px;padding-right:30px}
  .smpc .smpc-door-figure strong{font-size:19px}
  .smpc .smpc-drag{flex-direction:column;gap:8px;padding:12px 14px}
  .smpc .smpc-picks-head{flex-direction:column;gap:2px}
  .smpc .smpc-picks-grid,.smpc .smpc-picks-grid.smpc-n3{grid-template-columns:1fr}
  .smpc .smpc-picks-grid,.smpc .smpc-picks-grid.smpc-n3{gap:0;border:1px solid #ecd9b2;border-radius:14px;overflow:hidden;background:#fff}
  .smpc .smpc-pick{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:11px 14px;border:0;border-radius:0;background:#fff}
  .smpc .smpc-pick+.smpc-pick{border-top:1px solid #f1e6cf}
  .smpc .smpc-pick-for{grid-column:1/-1}
  .smpc .smpc-pick-name{font-size:16px}
  .smpc .smpc-pick-name .smpc-mono,.smpc .smpc-pick-name .smpc-logo{display:none}
  .smpc .smpc-pick-figure{text-align:right;white-space:nowrap}
  .smpc .smpc-pick-figure b{display:block}
  .smpc .smpc-pick-extra{display:none}
  .smpc .smpc-pick-rule{display:none}
  .smpc .smpc-side{grid-template-columns:1fr}
  .smpc .smpc-profiles{grid-template-columns:1fr 1fr}
  .smpc .smpc-profile{padding:9px 10px;gap:8px}
  .smpc .smpc-p-icon{width:28px;height:28px}
  .smpc .smpc-results-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .smpc .smpc-seg{max-width:100%;overflow-x:auto}
  .smpc .smpc-card{padding:14px 14px 10px}
  .smpc .smpc-card-top{grid-template-columns:1fr;gap:10px}
  .smpc .smpc-actions{flex-direction:row}
  .smpc .smpc-actions .smpc-go{flex:1}
  .smpc .smpc-figs{grid-template-columns:1fr 1fr;gap:8px}
  .smpc .smpc-figs .smpc-fig:first-child{grid-column:1/-1}
  .smpc .smpc-fig-value{font-size:20px}
  .smpc .smpc-facts{grid-template-columns:1fr 1fr;gap:10px}
  .smpc .smpc-blocks{grid-template-columns:1fr;margin-top:30px}
  .smpc .smpc-faq h2{font-size:24px}
}

/* ---------- 2026-10-22 round 2: universe view, compact phone layout ---------- */
.smpc .smpc-df-label{display:block}
.smpc .smpc-view-note{margin-top:6px}
.smpc .smpc-view-note summary{cursor:pointer;color:var(--petrol);font-weight:600}
.smpc .smpc-view-note p{margin:6px 0 0}
.smpc .smpc-drag-assume{margin:4px 0 0!important;font-size:12.5px;color:var(--muted)}
.smpc .smpc-results-bar{display:grid;grid-template-columns:auto auto 1fr;align-items:center}
.smpc .smpc-sort-wrap{justify-self:end;display:flex;align-items:center}
.smpc .smpc-toolbar,.smpc .smpc-phone-controls{display:none}
.smpc .smpc-quick{display:none}
.smpc .smpc-go-phone{display:none}
.smpc .smpc-tag-best .smpc-short{display:none}
.smpc .smpc-unk{color:var(--gold-ink);font-weight:650}
.smpc .smpc-bet{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--red-tint);color:var(--red-ink);font:600 11.5px/1.5 var(--sans)}
.smpc .smpc-card .smpc-body{display:block}
.smpc .smpc-detail{margin-top:12px;padding-top:12px;border-top:1px solid var(--sand)}
.smpc .smpc-detail h4{margin:12px 0 8px;font:600 11px/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.smpc .smpc-detail .smpc-facts{margin-top:12px}
.smpc .smpc-breakdown{display:block;margin:0}
.smpc .smpc-warn-line{margin:0 0 10px;padding:9px 12px;border-radius:10px;background:var(--red-tint);color:var(--red-ink);font:500 13px/1.45 var(--sans)}
.smpc .smpc-uni{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 2px}
.smpc .smpc-more[aria-expanded="true"]{color:var(--ink)}
.smpc .smpc-matrix-wrap{border:1px solid var(--border);border-radius:16px;background:#fff;overflow-x:auto}
.smpc .smpc-matrix{width:100%;border-collapse:collapse;font:500 13.5px/1.4 var(--sans)}
.smpc .smpc-matrix th,.smpc .smpc-matrix td{padding:11px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sand)}
.smpc .smpc-matrix thead th{font:600 11px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--gold-ink);background:#faf8f3}
.smpc .smpc-matrix tbody th{font:650 14px/1.3 var(--sans);min-width:128px}
.smpc .smpc-matrix tbody th small{display:block;font:500 12px/1.35 var(--sans);color:var(--muted);margin-top:2px}
.smpc .smpc-matrix td small{font-size:12px;color:var(--ink-soft)}
.smpc .smpc-matrix tr:last-child th,.smpc .smpc-matrix tr:last-child td{border-bottom:0}
.smpc .smpc-matrix-key{margin:8px 2px 0;font:500 12.5px/1.45 var(--sans);color:var(--muted)}

@media (max-width:1099px){
  .smpc .smpc-results-bar{grid-template-columns:1fr auto}
  .smpc .smpc-sort-wrap{grid-column:1/-1;justify-self:start}
  .smpc .smpc-uni{grid-template-columns:repeat(2,minmax(0,1fr))}
  .smpc .smpc-matrix-wrap{overflow-x:auto}
}

@media (max-width:760px){
  .smpc h1{margin-bottom:14px}
  .smpc .smpc-eyebrow{margin-bottom:8px}
  /* doors: two tiles side by side, title and figure only */
.smpc .smpc-doors{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
  .smpc .smpc-door{padding:12px 12px 10px;gap:6px;border-radius:14px}
  .smpc .smpc-door ul,.smpc .smpc-door[aria-selected="true"] ul,.smpc .smpc-door-legal,.smpc .smpc-door-icon{display:none}
  /* the title's longest word, «διαχειρίζονται», is about 7,2 times the font size wide in Noto Sans bold (measured on the live
     page): the size follows the tile, from 12px to 15,5px, so it fits down to 360px; below that it breaks at a syllable with a
     hyphen. The selected tile shows by its border and tint, so the check circle goes */
  .smpc .smpc-door-title{padding-right:0;font-size:15.5px;font-size:clamp(12px,calc((50cqi - 30px) / 7.5),15.5px);line-height:1.25}
  .smpc .smpc-door-check{display:none}
  .smpc .smpc-door-figure{padding-top:8px;font-size:12px}
  .smpc .smpc-door-figure strong{font-size:17px}
  .smpc .smpc-drag{margin-bottom:18px;padding:10px 12px;font-size:13.5px}
  .smpc .smpc-drag>svg{display:none}
  .smpc .smpc-picks{margin-bottom:16px}
  .smpc .smpc-picks-head{flex-direction:row;align-items:baseline}
  .smpc .smpc-picks-head h2{font-size:18px}
  .smpc .smpc-picks-head button{font-size:13px}
  .smpc .smpc-pick{padding:9px 12px}
  .smpc .smpc-pick-for{font-size:11px}
  .smpc .smpc-pick-name{font-size:15px}
  /* toolbar replaces the side column; filters open as a sheet */
.smpc .smpc-toolbar{display:flex;gap:6px;position:sticky;top:0;z-index:5;margin:0 -16px;padding:8px 16px;background:rgba(251,250,248,.96);border-bottom:1px solid var(--border);backdrop-filter:blur(6px)}
  .smpc .smpc-tb-select{flex:1;min-width:0}
  .smpc .smpc-tb-select select{width:100%;min-height:40px;padding:0 28px 0 10px;border:1px solid var(--border);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5b56' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/16px;font:600 13.5px/1 var(--sans);-webkit-appearance:none;appearance:none}
  .smpc .smpc-tb-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:40px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:#fff;font:600 13.5px/1 var(--sans)}
  /* the sort's options are plain words; the sort icon sits on the dropdown itself (owner, 2026-10-24: no «↕» in the menu) */
  .smpc .smpc-tb-sort select{padding-left:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5b56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5b56' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat,no-repeat;background-position:left 10px center,right 8px center;background-size:16px,16px}
  /* «Φίλτρα» opens and closes in place: the chevron turns */
  .smpc .smpc-chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .15s}
  .smpc .smpc-tb-btn[aria-expanded="true"] .smpc-chev{transform:rotate(180deg)}
  /* the way of investing (or the amount) in its own dropdown, with its heading, above the sticky row */
  .smpc .smpc-phone-controls{display:block;margin:0 0 4px}
  .smpc .smpc-pc{display:block}
  .smpc .smpc-pc-head{display:block;margin:0 0 6px;font:600 12px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink)}
  .smpc .smpc-pc select{width:100%;min-height:44px;padding:0 34px 0 12px;border:1px solid var(--border);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5b56' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px;font:600 15px/1.2 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none}
  .smpc .smpc-phone-controls .smpc-assume{margin-top:6px}
  .smpc .smpc-tb-btn b{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;border-radius:9px;background:var(--petrol);color:#fff;font-size:11px}
  .smpc .smpc-tb-btn[aria-expanded="true"]{border-color:var(--petrol);color:var(--petrol)}
  .smpc .smpc-side{display:none}
  .smpc .smpc-side.is-open{display:block;margin-top:2px}
  /* the open panel is the filters alone, full width, the chips wrapping several to a row */
  .smpc .smpc-side.is-open [data-smpc-controls]{display:none}
  .smpc .smpc-side.is-open .smpc-box{padding:0;border:0;border-radius:0;background:none}
  .smpc .smpc-side.is-open .smpc-box legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .smpc .smpc-side.is-open .smpc-chips{gap:6px}
  .smpc .smpc-side.is-open .smpc-chip span{padding:6px 10px;font-size:12.5px}
  .smpc .smpc-side .smpc-checked{display:none}
  .smpc .smpc-layout{gap:12px}
  .smpc .smpc-results-bar{grid-template-columns:1fr;gap:8px;margin-bottom:8px}
  .smpc .smpc-results-bar h2{font-size:18px}
  .smpc .smpc-results-bar h2 span{color:var(--muted);font-weight:600}
  .smpc .smpc-sort-wrap{display:none}
  .smpc .smpc-seg-view{width:100%}
  .smpc .smpc-seg-view label{flex:1}
  .smpc .smpc-seg-view span{justify-content:center}
  .smpc .smpc-disclosure{padding:8px 12px;font-size:13px;margin-bottom:10px}
  .smpc .smpc-disclosure .smpc-long{display:none}
  .smpc .smpc-disclosure svg{width:16px;height:16px}
  /* compact cards: name, tags and cost; the rest on tap */
.smpc .smpc-cards{gap:8px}
  .smpc .smpc-card{padding:12px 12px 10px;border-radius:14px}
  .smpc .smpc-card-top{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;margin-bottom:0}
  .smpc .smpc-who{gap:10px}
  .smpc .smpc-mono{width:34px;height:34px;font-size:12px;border-radius:9px}
  .smpc .smpc-logo{width:34px;height:34px;border-radius:9px}
  .smpc .smpc-who h3{font-size:16px}
  .smpc .smpc-entity{display:none}
  .smpc .smpc-tags{margin-top:5px;gap:4px}
  .smpc .smpc-tag{padding:2px 8px;font-size:11.5px}
  .smpc .smpc-tag-best .smpc-long{display:none}
  .smpc .smpc-tag-best .smpc-short{display:inline}
  .smpc .smpc-quick{display:flex;flex-direction:column;align-items:flex-end;justify-content:center}
  .smpc .smpc-q-cost{font:700 20px/1.1 var(--sans)}
  .smpc .smpc-q-label{font:500 11.5px/1.3 var(--sans);color:var(--muted)}
  .smpc .smpc-actions{grid-column:1/-1;flex-direction:row;justify-content:flex-start;margin-top:4px}
  .smpc .smpc-actions .smpc-go{display:none}
  .smpc .smpc-more{padding:4px 0;font-size:13px}
  .smpc .smpc-more::after{content:" ⌄"}
  .smpc .smpc-more[aria-expanded="true"]::after{content:" ⌃"}
  .smpc .smpc-card .smpc-body{display:none;margin-top:10px}
  .smpc .smpc-card.is-open .smpc-body{display:block}
  .smpc .smpc-figs{grid-template-columns:1fr 1fr}
  .smpc .smpc-figs .smpc-fig:first-child{display:none}
  .smpc .smpc-fig{padding:9px 10px}
  .smpc .smpc-fig-value{font-size:16px}
  .smpc .smpc-detail{margin-top:10px}
  .smpc .smpc-uni{grid-template-columns:1fr 1fr;gap:10px}
  .smpc .smpc-go-phone{display:flex;margin-top:12px}
  .smpc .smpc-group-head{margin:14px 0 2px;font-size:16px}
  .smpc .smpc-group-sub{font-size:13px;margin-bottom:8px}
  .smpc .smpc-notes .smpc-note{font-size:13px;padding:10px 12px}
  /* matrix becomes one block per row */
.smpc .smpc-matrix-wrap{border:0;background:none;overflow:visible}
  .smpc .smpc-matrix thead{display:none}
  .smpc .smpc-matrix,.smpc .smpc-matrix tbody,.smpc .smpc-matrix tr,.smpc .smpc-matrix th,.smpc .smpc-matrix td{display:block;width:auto}
  .smpc .smpc-matrix tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-bottom:8px;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff}
  .smpc .smpc-matrix th,.smpc .smpc-matrix td{padding:0;border:0}
  .smpc .smpc-matrix tbody th{grid-column:1/-1;min-width:0}
  .smpc .smpc-matrix td::before{content:attr(data-label);display:block;font:600 10.5px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .smpc .smpc-blocks{gap:10px}
  .smpc .smpc-block{padding:16px;font-size:15px}
}


/* key facts under the name: phone only; wider screens show the full figures */
.smpc .smpc-keyfacts{display:none}
@media (max-width:760px){
  /* one row per fact, label left and value right, so no word is split (three boxes side by side were 44–67px wide) */
  .smpc .smpc-keyfacts{grid-column:1/-1;display:block;margin:10px 0 2px;border:1px solid #efe9de;border-radius:9px;background:#faf8f3}
  .smpc .smpc-keyfacts div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 10px;min-width:0}
  .smpc .smpc-keyfacts div+div{border-top:1px solid #efe9de}
  .smpc .smpc-keyfacts dt{flex:0 1 auto;min-width:0;font:600 10px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);word-break:normal;overflow-wrap:normal}
  .smpc .smpc-keyfacts dd{flex:0 1 auto;min-width:0;margin:0;text-align:right;font:600 12.5px/1.3 var(--sans);color:var(--ink);word-break:normal;overflow-wrap:normal}
  .smpc .smpc-card .smpc-figs{display:none}
}
/* a few words are wider than their narrow cell: there a word of 12 letters or more breaks at a syllable, with a hyphen,
   instead of anywhere. The small labels and the card names need it below 380px («Ερωτηματολόγιο», «Χρηματιστηριακή»), the other cells only on
   320px-class screens («Χρηματιστηριακή», «καταλληλότητας»); shorter words and paragraphs keep their normal wrapping */
@media (max-width:380px){
  .smpc .smpc-fact-label,.smpc .smpc-card h3{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5}
}
@media (max-width:359px){
  .smpc .smpc-fact,.smpc .smpc-pick-name,.smpc .smpc-unk,.smpc .smpc-door-title{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5}
  /* «Wealthyhood» is too short to hyphenate (under 12 letters): a slightly smaller name lets it fit */
  .smpc .smpc-card h3{font-size:15px}
}
/* between 761px and 959px the side panel's two columns leave a profile 68px for its words: one profile per row */
@media (min-width:761px) and (max-width:959px){
  .smpc .smpc-profiles{grid-template-columns:minmax(0,1fr)}
}

/* page frame, sample banner, live region and the parts the mock-up did not need */
.smpc{max-width:1180px;margin:0 auto;padding:28px 24px 64px;color:var(--ink);font:17px/1.58 var(--serif);-webkit-font-smoothing:antialiased}
.smpc p,.smpc ul,.smpc ol,.smpc dl,.smpc dd{margin:0}
.smpc .smpc-sample{margin:0 0 18px;padding:9px 14px;border-radius:10px;background:var(--gold-tint);color:var(--ink-soft);font:500 13px/1.45 var(--sans)}
.smpc .smpc-sample strong{color:var(--gold-ink);letter-spacing:.09em;margin-right:6px}
.smpc .smpc-nojs{margin:0 0 18px;padding:12px 16px;border-left:4px solid var(--petrol);background:var(--petrol-tint);font:600 14px/1.5 var(--sans)}
.smpc .smpc-aff{display:block;text-align:center;font:500 12px/1.3 var(--sans);color:var(--muted)}
.smpc .smpc-notes-list{margin:0 0 10px;padding:9px 12px 9px 28px;border-radius:10px;background:var(--gold-tint);font:500 13px/1.45 var(--sans);color:var(--ink-soft)}
.smpc .smpc-notes-list li+li{margin-top:4px}
/* «Πώς βγαίνει»: each part with its sum, the amount right-aligned, then the total */
.smpc .smpc-breakdown{margin:0 0 10px}
.smpc .smpc-calc{list-style:none;margin:6px 0 0;padding:0}
.smpc .smpc-calc li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-top:1px solid rgba(0,0,0,.06)}
.smpc .smpc-calc li b{flex:none;color:var(--ink);font-weight:600;white-space:nowrap}
.smpc .smpc-calc .smpc-calc-how{color:var(--muted)}
.smpc .smpc-calc li.is-total{font-weight:700;color:var(--ink)}
.smpc .smpc-calc li.is-total b{font-weight:700}
.smpc .smpc-calc li.is-warn{color:var(--red-ink)}
.smpc .smpc-plans{margin:0 0 6px;padding-left:18px;font:500 13.5px/1.5 var(--sans);color:var(--ink-soft)}
.smpc .smpc-note ul{margin:6px 0 0;padding-left:18px}
.smpc .smpc-note li+li{margin-top:3px}
.smpc .smpc-block p{margin:0}
.smpc .smpc-block p+p{margin-top:10px}
.smpc .smpc-faq p{margin:10px 0 0}
.smpc .smpc-foot{margin-top:28px;text-align:center}
.smpc .smpc-layout>section{min-width:0}
/* touch targets of at least 44px at 1024px and below (PRODUCT-SPEC.md §12) */
@media (max-width:1024px){
  .smpc .smpc-chip span,.smpc .smpc-seg span{min-height:44px}
  .smpc .smpc-more,.smpc .smpc-picks-head button{min-height:44px;display:inline-flex;align-items:center}
  .smpc .smpc-tb-btn,.smpc .smpc-tb-select select{min-height:44px}
  .smpc .smpc-view-note summary{min-height:44px;display:flex;align-items:center}
  .smpc .smpc-faq summary{min-height:44px}
}
/* the results bar wraps when the count, the view switch and the sort don't fit one line (1100px with the side column) */
.smpc .smpc-results-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.smpc .smpc-sort-wrap{margin-left:auto}
@media (max-width:760px){.smpc .smpc-results-bar{gap:8px}.smpc .smpc-seg-view{flex:1 1 100%}}

/* the site's .entry-content table headers are small uppercase: the matrix's row headers are names */
.smpc .smpc-matrix tbody th{text-transform:none;letter-spacing:normal}
.smpc .smpc-block a,.smpc .smpc-view-note a{text-decoration:underline;text-underline-offset:3px;color:var(--petrol)}